CSS3实现翘边的阴影效果的代码示例
segmentfault 发布时间:2016-06-13 12:04:13 作者:trigkit4 我要评论
这篇文章主要介绍了CSS3实现翘边的阴影效果的代码示例,这里所谓的翘边的阴影就是指阴影分部不均而显得像是被翘起来的那种效果,需要的朋友可以参考下
效果:
HTML代码:
XML/HTML Code复制内容到剪贴板
- <div class="box shadow"></div>
CSS代码:
CSS Code复制内容到剪贴板
- .box {
- width: 300px;
- height: 100px;
- background: #ccc;
- border-radius: 10px;
- margin: 10px;
- }
- .shadow {
- position: relative;
- max-width: 270px;
- box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外阴影*/
- 0px 0px 20px rgba(0,0,0,0.1) inset;/*内阴影*/
- }
- .shadow::before,
- .shadow::after {
- content:"";
- position:absolute;
- z-index:-1;
- }
- .shadow::before,
- .shadow::after {
- content:"";
- position:absolute;
- z-index:-1;
- bottombottom:15px;
- left:10px;
- width:50%;
- height:20%;
- }
- .shadow::before,
- .shadow::after {
- content:"";
- position:absolute;
- z-index:-1;
- bottombottom:15px;
- left:10px;
- width:50%;
- height:20%;
- box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
- transform:rotate(-3deg);
- }
- .shadow::after{
- rightright:10px;
- left:auto;
- transform:rotate(3deg);
- }
伪元素before和after意思是在被选元素的内容前或后 插入内容
相关文章
css3实现渐变、阴影、超出指定文本省略号显示等一些效果实例
下面小编就为大家带来一篇css3实现渐变、阴影、超出指定文本省略号显示等一些效果实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-10- 下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-08-08
- 这篇文章主要为大家详细介绍了CSS3边框的不同效果实现代码,包括CSS3圆角边框、盒阴影、边界图片的制作方法,感兴趣的小伙伴们可以参考一下2016-07-01
- box-shadow图层阴影属性和text-shadow文字阴影属性在用法上差不多,都以X轴和Y轴坐标系来控制阴影扩展,这里我们就来详解CSS3的图层阴影和文字阴影效果使用:2016-06-09
详解CSS3的box-shadow属性制作边框阴影效果的方法
这篇文章主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下2016-05-10- 这篇文章主要为大家详细介绍了CSS3实现曲线阴影和翘边阴影的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-05-03
CSS3实现千变万化的文字阴影text-shadow效果设计
这篇文章主要介绍了CSS3实现千变万化的文字阴影text-shadow效果设计的相关资料,感兴趣的小伙伴们可以参考一下2016-04-26- 这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下2016-03-07
- 下面小编就为大家带来一篇5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-15
最新评论