devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS3实现曲线阴影和翘边阴影_css环绕阴影

作者：小丑西瓜9 | 2024-03-18 23:16:31

赞

踩

css环绕阴影

效果图如下：


index.html

  1. <!DOCTYPE html>
  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，必须声明<!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: 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: 290px;
  105.             height: 200px;
  106.             margin: 5px;
  107.         }
  108.  
  109.         .box li: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: 0 8px 20px rgba(0,0,0,0.6);
  119.             -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  120.             -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  121.             -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  122.  
  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.             *      Internet Explorer 9支持替代的-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);
  141.  
  142.             z-index: -1;
  143.         }
  144.  
  145.         .box li: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: 0 8px 20px rgba(0,0,0,0.6);
  154.             -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  155.             -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  156.             -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  157.  
  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);
  163.  
  164.             z-index: -1;
  165.         }
  166.     </style>
  167. </head>
  168. <body>
  169.     <div class="wrap effect">
  170.         <h1>Shadow Effect</h1>
  171.     </div>
  172.     <ul class="box">
  173.         <li><img src="images/1.jpg" alt="1.jpg"></li>
  174.         <li><img src="images/2.jpg" alt="2.jpg"></li>
  175.         <li><img src="images/3.jpg" alt="3.jpg"></li>
  176.     </ul>
  177. </body>
  178. </html>



声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/266104
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号