前言

相信大家在開發的過程中，都遇到過各式各樣的UI設計，最近開發項目的時候就遇到給指定方向的控件邊框添加陰影。話不多說，直接上圖吧。

圖1.png

圖2.png

分析需求

項目中用到的這個控件是一個自定義的UITextView,需要達到的需求就是有黑色的邊框，有圓角的處理，仔細看的小伙伴可以還發現了一個需求就是圖1的上邊框是帶陰影效果的，圖2的下邊框是帶陰影效果的。系統自帶的有設置陰影的，但是它是同時四邊一起設置，這就有點不符合我們的需求。那我們要怎么處理呢？

解決問題

系統的處理陰影的問題，是從控件的layer層去設置，我們的出發點也是抓住layer層去處理，自定義一個和控件的上邊界重合的layer，對它來進行設置。
我們用label來做實驗，先初始化一個lable，并進行簡單的設置：

//init lable
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMidX(self.view.frame) - 150, CGRectGetMidY(self.view.frame) - 20, 300, 40)];
    label.layer.borderWidth = 1.5;
    label.layer.borderColor = [UIColor blackColor].CGColor;
    label.layer.cornerRadius = 5;
    label.layer.masksToBounds = YES;
    [self.view addSubview:label];

效果如下：

圖3.png

接下來就是實現圖1 那樣的效果，上邊界帶陰影部分。

//set the shadow on the top edge
    CALayer *topLayer = [CALayer layer];
    topLayer.frame = CGRectMake(0, 1.5,label.frame.size.width,0.5);
    topLayer.shadowColor = [UIColor colorWithWhite:0.298 alpha:1.000].CGColor;
    topLayer.shadowOffset = CGSizeMake(0, 0.1);
    topLayer.shadowOpacity = 1;
    topLayer.shadowPath = [UIBezierPath bezierPathWithRect:topLayer.bounds].CGPath;
    [label.layer addSublayer:topLayer];

有圖有真相：

圖4.png

看起來不怎么明顯，設置陰影顏色為紅色：

圖5.png

下邊界也是同理去設置，就不繼續擼代碼了。