CSS3如何实现曲线阴影和翘边阴影

网络
秋天来啦，秋天来啦；天空像一块覆盖在大地上的蓝宝石，它已经给秋风抹试得洁净而明亮。棉花笑嘻嘻的来了，它听说好朋友—秋姑娘来了，笑的咧开了嘴。玉米在房顶上唱着歌跳着舞，别提多开心了。路边两只黑色的小狗在玩耍，看它那可爱的样子，让人忍不住的笑。石榴也许太兴奋了，竟然笑破了肚皮，苹果跑着来了，当然脸蛋是红彤彤的。

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

效果图如下：

index.html

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>CSS3实现曲线阴影和翘边阴影</title>
  6. <style>
  7. /*源于imooc的学习*/
  8. body{
  9. font-family:"微软雅黑","MicrosoftYaHei";
  10. font-size:20px;
  11. }
  12. body,ul,li,h1{
  13. padding:0;
  14. margin:0;
  15. }
  16. ul{
  17. list-style:noneoutsidenone;
  18. }
  19. .wrap{
  20. width:70%;
  21. height:200px;
  22. margin:50pxauto;
  23. background-color:#fff;
  24. }
  25. .wraph1{
  26. font-size:40px;
  27. text-align:center;
  28. line-height:200px;
  29. }
  31. /**
  32. *box-shadow
  33. *功能：添加一个或多个阴影
  34. *语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;
  35. *参数：
  36. *h-shadow（必需）：水平阴影的位置。允许负值。
  37. *v-shadow（必需）：垂直阴影的位置。允许负值。
  38. *blur（可选）：模糊程度，值越大越模糊。
  39. *spread（可选）：阴影的尺寸。一般不推荐设置。
  40. *color（可选）：阴影的颜色。请参阅CSS颜色值。
  41. *inset（可选）：将外部阴影（outset）改为内部阴影。
  42. *浏览器兼容：
  43. *IE9+、Firefox4、Chrome、Opera以及Safari5.1.1支持box-shadow属性。
  44. */
  45. .effect{
  46. position:relative;
  47. /*box-shadow:h-shadowv-shadowblurcolor[inset];*/
  48. -webkit-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  49. -moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  50. -o-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  51. box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  52. }
  53. /**
  54. *:after选择器：在被选元素的内容后面插入内容
  55. *:before选择器：在备选元素额内容后面插入内容
  56. *说明：需要使用content属性来指定要插入的内容
  57. *浏览器兼容：
  58. *对于IE8及更早版本的:after，必须声明<!DOCTYPE>。
  59. *
  60. *content属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的
  61. *框类型可以用属性display控制。
  62. */
  63. .effect::after,.effect::before{
  64. content:'';
  65. background:#f00;
  66. position:absolute;
  67. top:50%;
  68. bottom:0;
  69. left:20px;
  70. right:20px;
  71. -webkit-box-shadow:0020pxrgba(0,0,0,0.8);
  72. -moz-box-shadow:0020pxrgba(0,0,0,0.8);
  73. -o-box-shadow:0020pxrgba(0,0,0,0.8);
  74. box-shadow:0020pxrgba(0,0,0,0.8);
  76. border-radius:100px/10px;/*水平半径/垂直半径*/
  77. z-index:-1;
  78. }
  80. .box{
  81. width:980px;
  82. height:auto;
  83. clear:both;
  84. overflow:hidden;
  85. margin:20pxauto;
  86. }
  87. .boxli{
  88. width:300px;
  89. height:210px;
  90. float:left;
  91. margin:20px10px;
  92. border:2pxsolid#EFEFEF;
  94. -webkit-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset;
  95. -moz-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset;
  96. -o-box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset;
  97. box-shadow:01px4pxrgba(0,0,0,0.27),0060pxrgba(0,0,0,0.1)inset;
  99. position:relative;
  100. background-color:#FFF;
  101. }
  102. .boxliimg{
  103. display:block;
  104. width:290px;
  105. height:200px;
  106. margin:5px;
  107. }
  109. .boxli:before{
  110. content:'';
  111. position:absolute;
  112. width:90%;
  113. height:80%;
  114. left:20px;
  115. bottom:8px;
  116. /*background-color:#F00;*/
  117. background-color:transparent;
  118. box-shadow:08px20pxrgba(0,0,0,0.6);
  119. -webkit-box-shadow:08px20pxrgba(0,0,0,0.6);
  120. -moz-box-shadow:08px20pxrgba(0,0,0,0.6);
  121. -o-box-shadow:08px20pxrgba(0,0,0,0.6);
  123. /**
  124. *transform
  125. *功能：向元素应用2D或3D转换
  126. *语法：transform:none|transform-functions
  127. *参数：
  128. *skew(x-angle,y-angle)定义沿着X和Y轴的2D倾斜转换
  129. *skewX(angle)定义沿着X轴的2D倾斜转换。
  130. *skewY(angle)定义沿着y轴的2D倾斜转换。
  131. *浏览器兼容：
  132. *InternetExplorer9支持替代的-ms-transform属性（仅适用于2D转换）
  133. *Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）
  134. *Opera只支持2D转换。
  135. */
  136. -webkit-transform:skewX(-11deg)rotate(-4deg);
  137. -moz-transform:skewX(-11deg)rotate(-4deg);
  138. -ms-transform:skewX(-11deg)rotate(-4deg);
  139. -o-transform:skewX(-11deg)rotate(-4deg);
  140. transform:skewX(-11deg)rotate(-4deg);
  142. z-index:-1;
  143. }
  145. .boxli:after{
  146. content:'';
  147. position:absolute;
  148. width:90%;
  149. height:80%;
  150. right:20px;
  151. bottom:8px;
  152. background-color:transparent;
  153. box-shadow:08px20pxrgba(0,0,0,0.6);
  154. -webkit-box-shadow:08px20pxrgba(0,0,0,0.6);
  155. -moz-box-shadow:08px20pxrgba(0,0,0,0.6);
  156. -o-box-shadow:08px20pxrgba(0,0,0,0.6);
  158. -webkit-transform:skewX(11deg)rotate(4deg);
  159. -moz-transform:skewX(11deg)rotate(4deg);
  160. -ms-transform:skewX(11deg)rotate(4deg);
  161. -o-transform:skewX(11deg)rotate(4deg);
  162. transform:skewX(11deg)rotate(4deg);
  164. z-index:-1;
  165. }
  166. </style>
  167. </head>
  168. <body>
  169. <divclass="wrapeffect">
  170. <h1>ShadowEffect</h1>
  171. </div>
  172. <ulclass="box">
  173. <li><imgsrc="images/1.jpg"alt="1.jpg"></li>
  174. <li><imgsrc="images/2.jpg"alt="2.jpg"></li>
  175. <li><imgsrc="images/3.jpg"alt="3.jpg"></li>
  176. </ul>
  177. </body>
  178. </html>

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例