CSS3完成曲线图黑影和翘边黑影

日期:2021-03-04 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

本文案例为大伙儿共享了CSS3完成曲线图黑影和翘边黑影的实际效果,原先无需ps技术性还可以完成黑影实际效果,很棒的实际效果,供大伙儿参照,实际內容以下

实际效果图以下:

index.html

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF⑻">     
  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.         * 作用:加上1个或好几个黑影     
  34.         * 英语的语法:box-shadow: h-shadow v-shadow blur spread color inset;     
  35.         * 主要参数:     
  36.         *      h-shadow(必须):水平黑影的部位。容许负值。     
  37.         *      v-shadow(必须):竖直黑影的部位。容许负值。     
  38.         *      blur(可选):模糊不清水平,值越大越模糊不清。     
  39.         *      spread(可选):黑影的规格。1般不强烈推荐设定。     
  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: ⑴;     
  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或三d变换     
  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特性(三d和2D变换)     
  134.             *      Opera只适用2D变换。     
  135.             */     
  136.             -webkit-transform: skewX(⑴1deg) rotate(⑷deg);     
  137.             -moz-transform: skewX(⑴1deg) rotate(⑷deg);     
  138.             -ms-transform: skewX(⑴1deg) rotate(⑷deg);     
  139.             -o-transform: skewX(⑴1deg) rotate(⑷deg);     
  140.             transform: skewX(⑴1deg) rotate(⑷deg);     
  141.      
  142.             z-index: ⑴;     
  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: ⑴;     
  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>   

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。