zoukankan      html  css  js  c++  java
  • css3盒子阴影

    昨天,没有更新,因为调换班级的原因。可能我直接把源码放上去,对于有些自学的同学看到可能并不好用,但是可能目前还没有更好的方法,我把整理过后没有注释的代码放到了我的印象笔记里面,方便复习。以后会改将方法,希望对新人有所帮助。

    <!DOCTYPE html>
    <html>
    <head>
    <title>盒子阴影</title>
    <style type="text/css">
    .a{
    100px;
    height: 100px;
    margin: 100px auto;
    /*box-shadow 第一个参数代表x轴的偏移量
    第二个参数代表y轴的偏移量(可以为负值代表向反方向偏移)
    第三个参数是模糊度
    第四个参数的发散度
    第五个是颜色*/
    box-shadow: 0 0 20px 50px red;
    }
    .b{
    100px;
    height: 100px;
    margin: 100px auto;
    /* box-shadow多阴影 直接在设定的阴影后写逗号隔开就可以写多个了*/
    box-shadow:
    0 0 10px 10px red,
    0 0 10px 20px green,
    0 0 10px 30px blue,
    0 0 0 40px pink;
    }
    .c{
    100px;
    height: 100px;
    margin: 100px auto;
    border: solid 1px darkgray;
    /*box-shadow还有第六个属性inset 可以设定内阴影 box-shadow的默认阴影是外阴影*/
    box-shadow: 5px 5px 10px #999 inset,
    5px 5px 20px red inset;
    }
    </style>
    </head>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    </body>
    </html>

  • 相关阅读:
    前端性能优化
    web缓存
    js实现数组去重并且显示重复的元素和索引值
    前端面试简单整理
    js记录重复字母的个数
    js数组快速排序
    sql数据库链接
    w3cschool -css
    w3cschool -html
    A*算法在栅格地图上的路径搜索(python实现)
  • 原文地址:https://www.cnblogs.com/adialike/p/6381691.html
Copyright © 2011-2022 走看看