美文网首页
简单方法画带圆角的阴影背景

简单方法画带圆角的阴影背景

作者: Kadima_章鱼 | 来源:发表于2016-06-24 12:35 被阅读208次

按一般画阴影方法,这样便可以画出一个阴影背景

UIImageView *imageView = [[UIImageView alloc] init];
imageView.layer.shadowColor = [UIColor blackColor].CGColor;//shadowColor阴影颜色  
imageView.layer.shadowOffset = CGSizeMake(4,4);//shadowOffset阴影偏移,x向右偏移4,y向下偏移4,默认(0, -3),这个跟shadowRadius配合使用  
imageView.layer.shadowOpacity = 0.8;//阴影透明度,默认0  
imageView.layer.shadowRadius = 4;//阴影半径,默认3 

加上圆角

imageView.layer.masksToBounds = YES;
imageView.layer.cornerRadius = imageViewWH/2;

因为masksToBounds表示对frame外的内容进行裁剪,只可显示frame内的内容,由于阴影是在frame外,所以直接被裁剪了。

这里我们可以用如下方法简单实现带圆角阴影

我们可以把带圆角的imageView放到一个和它大小的UIView中,让这个view来实现阴影

CGFloat headerWH = 80;
UIView *shadow = [[UIView alloc] init];
shadow.backgroundColor = [UIColor clearColor];//这里一定要clearColor,如果view有颜色则画出来的阴影跟随view下面,clearColor画出来的阴影则是跟随加在view上的带圆角子视图的
shadow.layer.shadowColor = [UIColor lightGrayColor].CGColor;
shadow.layer.shadowRadius = 4;
shadow.layer.shadowOffset = CGSizeMake(4, 4);
shadow.layer.shadowOpacity = 1;
shadow.clipsToBounds = NO;
shadow.frame = CGRectMake(100, 100, headerWH, headerWH);
[self addSubview:shadow];
        
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@""];
imageView.layer.masksToBounds = YES;
imageView.layer.cornerRadius = headerWH/2;
imageView.frame = CGRectMake(0, 0, headerWH, headerWH);
[shadow addSubview:imageView];

相关文章

  • 简单方法画带圆角的阴影背景

    按一般画阴影方法,这样便可以画出一个阴影背景 加上圆角 因为masksToBounds表示对frame外的内容进行...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • canvas 绘制带四周阴影效果的圆角图片

    绘制带四周阴影效果的圆角图片 想要绘制圆角图片一可以先绘制出圆角矩形,然后对画布进行剪切clip,这样在剪切过的画...

  • iOS TableViewCell圆角加阴影,阴影重叠,阴影超出

    如图,圈住的地方是带有圆角的内容背景,要给它加阴影。 用上述代码方法即可,但是这种方式在列表就会异常。Q:1.阴影...

  • iOS 借助stretchableImageWithLeftCa

    公司有一个需求 通过滑动条控制设备 滑动条要求带圆角具体需求如下: 右侧的圆角比较简单 可通过一张带圆角的背景图模...

  • 同时设置圆角和阴影

    单独给图片、按钮设置圆角或者阴影效果比较简单,但是如果这两个同时设置、最后再设置上背景图片,就会发现不是圆角没了,...

  • css与div专题

    为div设置样式 背景 颜色背景 圆角背景 ie支持不是很好 边框背景 阴影背景 ie支持不是很好 圆形背景...

  • Android样式的开发_layer-list篇

    上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景。但是,如果只提供...

  • Flutter之Decoration(边框、圆角、阴影、形状、渐

    1简介 BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像 ShapeDecoration:实...

  • 默认浏览器样式

    /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ /定义滚动条轨道 内阴影+圆角/ /定义滑块 内阴影+圆角/

网友评论

      本文标题:简单方法画带圆角的阴影背景

      本文链接:https://www.haomeiwen.com/subject/xipodttx.html