前端开发人员掌握CSS3属性_box-shadow实现多重边框

前端开发人员必读网|前端开发常用命名|前端开发常用小技巧

css3揭秘读书笔记

大家都知道,以前呢,我们如果要实现多重边框,一般是通过多个元素嵌套来实现,那现在呢,我们可以通过box-shadow属性来实现,
大部分的人可能用它来生成投影,如:box-shadow: 1px 1px 3px #444;
可能不知道它还接受第四个参数-扩展半径,这个值可以是正值或负值,正值–让投影的面积加大,负值–让投影的面积减小,举个例子来说明:
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>webgis前端开发人员</title>
    <style>
        .wrap {
            float: left;
            margin: 30px;
        }
        .box,
        .pox,
        .nor {
            width: 100px;
            height: 100px;
            background: orange;
        }
        .nor {
            box-shadow: 0 0 0 10px green;
        }
        .box {
            box-shadow: 50px 50px 0 10px green;
        }
        .pox {
            box-shadow: 50px 50px 0 -10px green;
        }
    </style>
</head>
<body>
    <div class=”wrap”>
        <p>box-shadow:0 0 0 10px green;</p>
        <div class=”nor”></div>
    </div>
    <div class=”wrap”>
        <p>box-shadow:50px 50px 0 10px green;</p>
        <div class=”box”></div>
    </div>
    <div class=”wrap”>
        <p>box-shadow:50px 50px 0 -10px green;</p>
        <div class=”pox”></div>
    </div>
</body>
</html>

box-shadow的好处在于,它支持逗号分隔语法,我们可以创建任意数量的投影,效果如下
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>中国前端开发人员年龄</title>
    <style>
        .box,
        .pox {
            float: left;
            width: 50px;
            height: 50px;
            background: orange;
            margin: 50px;
            box-shadow: 0 0 0 8px green,
            0 0 0 16px blue,
            0 0 0 24px red;
        }
        .pox {
            border-radius: 100%;
        }
    </style>
</head>
<body>
    <div class=”box”></div>
    <div class=”pox”></div>
</body>
</html>

说到这里我想到一个box-shadow一个有意思的用法,当时看css魔法的视频里面,可以用它来画出一些图标来,这里呢,展示一个,画的不太漂亮~
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发人员的规划</title>
    <style>
        .box {
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: orange;
            margin: 100px;
            box-shadow: 50px 0 0 -16px orange,
            -50px 0 0 -16px orange,
            0 50px 0 -16px orange,
            0 -50px 0 -16px orange,
            -34px -34px 0 -16px orange,
            34px 34px 0 -16px orange,
            -34px 34px 0 -16px orange,
            34px -34px 0 -16px orange;
        }
    </style>
</head>
<body>
    <div class=”box”></div>
</body>
</html>
前端开发人员结构|40岁的前端开发人员|40岁的前端开发人员
» 本文来自:前端开发者 » 《前端开发人员掌握CSS3属性_box-shadow实现多重边框》
» 本文链接地址:https://www.rokub.com/4009.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!