CSS3实现曲线阴影和翘边阴影_ Div+Css教程-查字典教程网
CSS3实现曲线阴影和翘边阴影
CSS3实现曲线阴影和翘边阴影
发布时间:2017-01-07 来源:查字典编辑
摘要:本文实例为大家分享了CSS3实现曲线阴影和翘边阴影的效果,原来不用ps技术也可以实现阴影效果,很棒的效果,供大家参考,具体内容如下效果图如下...

本文实例为大家分享了CSS3实现曲线阴影和翘边阴影的效果,原来不用ps技术也可以实现阴影效果,很棒的效果,供大家参考,具体内容如下

效果图如下:

index.html

XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS3实现曲线阴影和翘边阴影</title> <style> /*源于imooc的学习*/ body{ font-family:"微软雅黑","MicrosoftYaHei"; font-size:20px; } body,ul,li,h1{ padding:0; margin:0; } ul{ list-style:noneoutsidenone; } .wrap{ width:70%; height:200px; margin:50pxauto; background-color:#fff; } .wraph1{ font-size:40px; text-align:center; line-height:200px; } /** *box-shadow *功能:添加一个或多个阴影 *语法:box-shadow:h-shadowv-shadowblurspreadcolorinset; *参数: *h-shadow(必需):水平阴影的位置。允许负值。 *v-shadow(必需):垂直阴影的位置。允许负值。 *blur(可选):模糊程度,值越大越模糊。 *spread(可选):阴影的尺寸。一般不推荐设置。 *color(可选):阴影的颜色。请参阅CSS颜色值。 *inset(可选):将外部阴影(outset)改为内部阴影。 *浏览器兼容: *IE9+、Firefox4、Chrome、Opera以及Safari5.1.1支持box-shadow属性。 */ .effect{ position:relative; /*box-shadow:h-shadowv-shadowblurcolor[inset];*/ -webkit-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; -moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; -o-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset; } /** *:after选择器:在被选元素的内容后面插入内容 *:before选择器:在备选元素额内容后面插入内容 *说明:需要使用content属性来指定要插入的内容 *浏览器兼容: *对于IE8及更早版本的:after,必须声明<!DOCTYPE>。 * *content属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的 *框类型可以用属性display控制。 */ .effect::after,.effect::before{ content:''; background:#f00; position:absolute; top:50%; bottom:0; left:20px; right:20px; -webkit-box-shadow:0020pxrgba(0,0,0,0.8); -moz-box-shadow:0020pxrgba(0,0,0,0.8); -o-box-shadow:0020pxrgba(0,0,0,0.8); box-shadow:0020pxrgba(0,0,0,0.8); border-radius:100px/10px;/*水平半径/垂直半径*/ z-index:-1; } .box{ width:980px; height:auto; clear:both; overflow:hidden; margin:20pxauto; } .boxli{ width:300px; height:210px; float:left; margin:20px10px; border:2pxsolid#EFEFEF; -webkit-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; -moz-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; -o-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset; position:relative; background-color:#FFF; } .boxliimg{ display:block; width:290px; height:200px; margin:5px; } .boxli:before{ content:''; position:absolute; width:90%; height:80%; left:20px; bottom:8px; /*background-color:#F00;*/ background-color:transparent; box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-box-shadow:08px20pxrgba(0,0,0,0.6); -moz-box-shadow:08px20pxrgba(0,0,0,0.6); -o-box-shadow:08px20pxrgba(0,0,0,0.6); /** *transform *功能:向元素应用2D或3D转换 *语法:transform:none|transform-functions *参数: *skew(x-angle,y-angle)定义沿着X和Y轴的2D倾斜转换 *skewX(angle)定义沿着X轴的2D倾斜转换。 *skewY(angle)定义沿着y轴的2D倾斜转换。 *浏览器兼容: *InternetExplorer9支持替代的-ms-transform属性(仅适用于2D转换) *Safari和Chrome支持替代的-webkit-transform属性(3D和2D转换) *Opera只支持2D转换。 */ -webkit-transform:skewX(-11deg)rotate(-4deg); -moz-transform:skewX(-11deg)rotate(-4deg); -ms-transform:skewX(-11deg)rotate(-4deg); -o-transform:skewX(-11deg)rotate(-4deg); transform:skewX(-11deg)rotate(-4deg); z-index:-1; } .boxli:after{ content:''; position:absolute; width:90%; height:80%; right:20px; bottom:8px; background-color:transparent; box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-box-shadow:08px20pxrgba(0,0,0,0.6); -moz-box-shadow:08px20pxrgba(0,0,0,0.6); -o-box-shadow:08px20pxrgba(0,0,0,0.6); -webkit-transform:skewX(11deg)rotate(4deg); -moz-transform:skewX(11deg)rotate(4deg); -ms-transform:skewX(11deg)rotate(4deg); -o-transform:skewX(11deg)rotate(4deg); transform:skewX(11deg)rotate(4deg); z-index:-1; } </style> </head> <body> <divclass="wrapeffect"> <h1>ShadowEffect</h1> </div> <ulclass="box"> <li><imgsrc="images/1.jpg"alt="1.jpg"></li> <li><imgsrc="images/2.jpg"alt="2.jpg"></li> <li><imgsrc="images/3.jpg"alt="3.jpg"></li> </ul> </body> </html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类