zoukankan      html  css  js  c++  java

  • css box-shadow

    1.     <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <title>CSS3边框</title>
    6.    <style>
    7.       body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
    8.          margin: 0;
    9.          padding: 0;
    10.       }
    11.  
    12.       body {
    13.          background-color: #F7F7F7;
    14.       }
    15.  
    16.       .wrapper {
    17.          width: 1000px;
    18.          margin: 0 auto;
    19.          padding: 20px;
    20.          box-sizing: border-box;
    21.       }
    22.  
    23.       header {
    24.          padding: 20px 0;
    25.          margin-bottom: 20px;
    26.          text-align: center;
    27.       }
    28.  
    29.       header h3 {
    30.          line-height: 1;
    31.          font-weight: normal;
    32.          font-size: 28px;
    33.       }
    34.  
    35.       .main {
    36.          /*overflow: hidden;*/
    37.       }
    38.  
    39.       .main:after {
    40.          content: '';
    41.          clear: both;
    42.          display: block;
    43.       }
    44.  
    45.       .main .item {
    46.          width: 210px;
    47.          height: 210px;
    48.          margin: 0 30px 30px 0;
    49.          display: flex;
    50.          position: relative;
    51.          background-color: #FFF;
    52.          float: left;
    53.          box-shadow: 2px 2px 5px #CCC;
    54.       }
    55.  
    56.       .main .item:after {
    57.          content: attr(data-brief);
    58.          display: block;
    59.          width: 100%;
    60.          height: 100%;
    61.          text-align: center;
    62.          line-height: 210px;
    63.          position: absolute;
    64.          top: 0;
    65.          left: 0;
    66.          color: #FFF;
    67.          font-family: '微软雅黑';
    68.          font-size: 18px;
    69.          background-color: rgba(170, 170, 170, 0);
    70.          z-index: -1;
    71.          transition: all 0.3s ease-in;
    72.       }
    73.  
    74.       .main .item:hover:after {
    75.          background-color: rgba(170, 170, 170, 0.6);
    76.          z-index: 100;
    77.       }
    78.  
    79.       .main .item:nth-child(4n) {
    80.          margin-right: 0;
    81.       }
    82.  
    83.       /*.main .item:nth-last-child(-n+5) {
    84.          margin-bottom: 0;
    85.       }*/
    86.  
    87.       /* 以上是骨架样式 */
    88.       .box-shadow {
    89.          width: 100px;
    90.          height: 100px;
    91.          border: 1px solid #DDD;
    92.          margin: auto;
    93.       }
    94.  
    95.       /*标准写法*/
    96.       .item:nth-child(1) .box-shadow {
    97.          box-shadow: 2px 2px 5px #000;
    98.       }
    99.  
    100.       /*水平偏移量 正值向右 负值向左 垂直正值向下 负值向上*/
    101.       .item:nth-child(2) .box-shadow {
    102.          box-shadow: -2px -2px 5px #000;
    103.       }
    104.  
    105.       /*上面有阴影*/
    106.       .item:nth-child(3) .box-shadow {
    107.          box-shadow: 0 -2px 5px #000;
    108.       }
    109.  
    110.       /*下面有阴影*/
    111.       .item:nth-child(4) .box-shadow {
    112.          box-shadow: 0 2px 5px #000;
    113.       }
    114.  
    115.  
    116.       /*模糊度是不能为负 自行设一下*/
    117.  
    118.  
    119.       /*偏移量和模糊度是可以相加计算 负号只代表方向*/
    120.       .item:nth-child(5) .box-shadow {
    121.          box-shadow: -5px -5px 0px #000;
    122.       }
    123.  
    124.       /*偏移量和扩展也是相加的 需要对比第七个*/
    125.       .item:nth-child(6) .box-shadow {
    126.          box-shadow: 15px 15px 0 #000;
    127.       }
    128.  
    129.       /*偏移量和扩展也是相加的 需要对比第六个*/
    130.       .item:nth-child(7) .box-shadow {
    131.          box-shadow: 0 0 0 10px #000;
    132.       }
    133.  
    134.       /*移量和扩展也是数学运算的*/
    135.       .item:nth-child(8) .box-shadow {
    136.          box-shadow: 20px 20px 0 -10px #000;
    137.       }
    138.  
    139.       /*内阴影inset*/
    140.       .item:nth-child(9) .box-shadow {
    141.          box-shadow: inset 20px 20px 20px -10px #000;
    142.       }
    143.  
    144.       /*关于模糊度 从一个颜色值在一定距离内进行一个渐变至透明的过程*/
    145.  
    146.       /*内外阴影*/
    147.       .item:nth-child(10) .box-shadow {
    148.          box-shadow: inset 20px 20px 20px -10px #000,
    149.                   20px 20px 10px red;
    150.       }
    151.  
    152.       /*多个内外阴影*/
    153.       .item:nth-child(11) .box-shadow {
    154.          box-shadow: inset 20px 20px 0px -10px green,
    155.                   inset 20px 20px 20px -10px #000,
    156.                   20px 20px 10px red,
    157.                   20px 20px 10px blue;
    158.       }
    159.  
    160.       /*是否会影响盒子布局*/
    161.       .item:nth-child(12) .box-shadow {
    162.          width: 90px;
    163.          height: 90px;
    164.          margin-right: 10px;
    165.          background-color: red;
    166.       }
    167.  
    168.       /*不会影盒子的布局*/
    169.       .item:nth-child(12) .left {
    170.          box-shadow: 50px 50px 50px 20px blue;
    171.       }
    172.    </style>
    173. </head>
    174. <body>
    175.    <div class="wrapper">
    176.       <header>
    177.          <h3>CSS3边框阴影</h3>
    178.       </header>
    179.       <div class="main">
    180.          <div class="item" data-brief="标准写法">
    181.             <div class="box-shadow"></div>
    182.          </div>
    183.          <div class="item">
    184.             <div class="box-shadow"></div>
    185.          </div>
    186.          <div class="item" data-brief="上面有阴影">
    187.             <div class="box-shadow"></div>
    188.          </div>
    189.          <div class="item" data-brief="下面有阴影">
    190.             <div class="box-shadow"></div>
    191.          </div>
    192.          <div class="item" data-brief="偏移量和模糊度是可以相加计算">
    193.             <div class="box-shadow"></div>
    194.          </div>
    195.          <div class="item" data-brief="需要对比第七个">
    196.             <div class="box-shadow"></div>
    197.          </div>
    198.          <div class="item" data-brief="需要对比第六个">
    199.             <div class="box-shadow"></div>
    200.          </div>
    201.          <div class="item" data-brief="移量和扩展也是数学运算的">
    202.             <div class="box-shadow"></div>
    203.          </div>
    204.          <div class="item" data-brief="内阴影inset">
    205.             <div class="box-shadow"></div>
    206.          </div>
    207.          <div class="item" data-brief="内外阴影">
    208.             <div class="box-shadow"></div>
    209.          </div>
    210.          <div class="item" data-brief="多个内外阴影">
    211.             <div class="box-shadow"></div>
    212.          </div>
    213.          <div class="item" data-brief="是否会影响盒子布局">
    214.             <div class="box-shadow left"></div>
    215.             <div class="box-shadow right"></div>
    216.          </div>
    217.       </div>
    218.    </div>
    219. </body>
    220. </html>
  • 相关阅读:
    转载:DIV+CSS有可能遇到的问题
    CSS3那些不为人知的高级属性
    php获取GET方式传入的全部变量名称与值:foreach用法
    转载：Erlang 资源
    Java工具类 Apache Commons：commons-lang
    PHP安装环境,服务器不支持curl_exec的解决办法
    2018年5月10日论文阅读
    C++ code：char pointers and char arrays（字符指针与字符数组）
    2018年5月9日论文阅读
    C++ code：More Loop Designs
  • 原文地址：https://www.cnblogs.com/wangyawei/p/9100030.html
Copyright © 2011-2022 走看看