您现在的位置是：网站首页> 编程资料编程资料

CSS3实现曲线阴影和翘边阴影css box-shadow实现曲边阴影与翘边阴影CSS 翘边阴影的实现代码

2021-09-05 2107人已围观

简介 这篇文章主要为大家详细介绍了CSS3实现曲线阴影和翘边阴影的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图如下：

index.html

XML/HTML Code复制内容到剪贴板
  1. >     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>CSS3实现曲线阴影和翘边阴影title>     
  6.     <style>     
  7.         /*源于imooc的学习*/     
  8.         body {     
  9.             font-family: "微软雅黑", "Microsoft YaHei";     
  10.             font-size: 20px;     
  11.         }     
  12.         body, ul, li, h1 {     
  13.             padding: 0;     
  14.             margin: 0;     
  15.         }     
  16.         ul {     
  17.             list-style: none outside none;     
  18.         }     
  19.         .wrap {     
  20.             width: 70%;     
  21.             height: 200px;     
  22.             margin: 50px auto;     
  23.             background-color: #fff;     
  24.         }     
  25.         .wrap h1 {     
  26.             font-size: 40px;     
  27.             text-align: center;     
  28.             line-height: 200px;     
  29.         }     
  30.      
  31.         /**     
  32.         * box-shadow     
  33.         * 功能：添加一个或多个阴影     
  34.         * 语法：box-shadow: h-shadow v-shadow blur spread color inset;     
  35.         * 参数：     
  36.         *      h-shadow（必需）：水平阴影的位置。允许负值。     
  37.         *      v-shadow（必需）：垂直阴影的位置。允许负值。     
  38.         *      blur（可选）：模糊程度，值越大越模糊。     
  39.         *      spread（可选）：阴影的尺寸。一般不推荐设置。     
  40.         *      color（可选）：阴影的颜色。请参阅CSS颜色值。     
  41.         *      inset（可选）：将外部阴影（outset）改为内部阴影。     
  42.         * 浏览器兼容：     
  43.         *      IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow属性。     
  44.         */     
  45.         .effect {     
  46.             position: relative;     
  47.             /*box-shadow: h-shadow v-shadow blur color [inset];*/     
  48.             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  49.             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  50.             -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  51.             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;     
  52.         }     
  53.         /**     
  54.         * :after选择器：在被选元素的内容后面插入内容     
  55.         * :before选择器：在备选元素额内容后面插入内容     
  56.         * 说明：需要使用content属性来指定要插入的内容     
  57.         * 浏览器兼容：     
  58.         *      对于IE8及更早版本的:after，必须声明>。     
  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: 0 0 20px rgba(0,0,0,0.8);     
  72.             -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  73.             -o-box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  74.             box-shadow: 0 0 20px rgba(0,0,0,0.8);     
  75.      
  76.             border-radius: 100px/10px; /*水平半径/垂直半径*/     
  77.             z-index: -1;     
  78.         }     
  79.      
  80.         .box {     
  81.             width: 980px;     
  82.             height: auto;     
  83.             clear: both;     
  84.             overflow: hidden;     
  85.             margin: 20px auto;     
  86.         }     
  87.         .box li {     
  88.             width: 300px;     
  89.             height: 210px;     
  90.             float: left;     
  91.             margin: 20px 10px;     
  92.             border: 2px solid #EFEFEF;     
  93.      
  94.             -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  95.             -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  96.             -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  97.             box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 60px rgba(0,0,0,0.1) inset;     
  98.      
  99.             position: relative;     
  100.             background-color: #FFF;     
  101.         }     
  102.         .box li img {     
  103.             display: block;     
  104.             width

    上一篇：CSS3让登陆面板3D旋转起来CSS3 3D旋转rotate效果实例介绍 CSS3近阶段篇之酷炫的3D旋转透视 CSS3实现的一款迷人3D木块旋转动画CSS3实现酷炫的3D旋转透视效果

    下一篇：浅析CSS等高布局的6种方式css设置多列等高布局的方法示例前端应该掌握的CSS实现多列等高布局技巧利用CSS3的flexbox实现水平垂直居中与三列等高布局用CSS实现三列DIV等高布局以传达更好的视觉效果多列等高的CSS实现代码CSS 三栏等高布局实现方法CSS实例：CSS实现的等高网页布局CSS实例:三列等高布局-CSS教程-网页制作-网页教学网css多种方式实现等高布局的示例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网