盒子阴影

最新推荐文章于 2024-02-15 17:01:04 发布

lulu_jiang

最新推荐文章于 2024-02-15 17:01:04 发布

阅读量1.2k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/lulu_jiang/article/details/42490593

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        *{margin:0;padding:0;}

        /**************************** CSS3盒子阴影属性 ***************************/
        /* box-shadow:none | [inset x-offset y-offset blur-radius spreed-radius color],[inset x-offset y-offset blur-radius spread-radius color] */
        #boxShadow1>div{border:1px solid #ccc;width:100px;height:50px;display:inline-block;margin:10px;}
        /* x-offset正值，生成右阴影，负值，生成左阴影 */
        /* y-offset正值，生成底阴影，负值，生成顶阴影 */
        #boxShadow1>div:nth-child(1){box-shadow:0 -5px 0 red;}
        #boxShadow1>div:nth-child(2){box-shadow:5px 0 0 green;}
        #boxShadow1>div:nth-child(3){box-shadow:0 5px 0 blue;}
        #boxShadow1>div:nth-child(4){box-shadow:-5px 0 0 orange;}
        /* blur-radius设置阴影半径模糊(会给其他3边带入淡淡的阴影) */
        #boxShadow1>div:nth-of-type(5){box-shadow:0 -5px 5px red;}
        #boxShadow1>div:nth-of-type(6){box-shadow:5px 0 5px green;}
        #boxShadow1>div:nth-of-type(7){box-shadow:0 5px 5px blue;}
        #boxShadow1>div:nth-of-type(8){box-shadow:-5px 0 5px orange;}
        /* spread-radius设置阴影扩散半径，可实现单边阴影效果 */
        #boxShadow1>div:nth-of-type(9){box-shadow:0 -5px 5px -3px red;}
        #boxShadow1>div:nth-of-type(10){box-shadow:5px 0 5px -3px green;}
        #boxShadow1>div:nth-of-type(11){box-shadow:0 5px 5px -3px blue;}
        #boxShadow1>div:nth-of-type(12){box-shadow:-5px 0 5px -3px orange;}
        /* 四边相同的阴影效果 */
        #boxShadow2>div{border:1px solid #ccc;border-radius:10px;width:200px;height:100px;margin-left:20px;display:inline-block;}
        #boxShadow2>div:nth-of-type(1){box-shadow:0 0 10px #06c;}
        #boxShadow2>div:nth-of-type(2){box-shadow:0 0 10px 10px #06c;}
        #boxShadow2>div:nth-of-type(3){box-shadow:0 0 10px -10px #06c;}
        /* box-shadow可用来制作边框效果，但并非边框，因其不是盒模型，不会计算入内容宽度，不会影响页面布局 */
        #boxShadow3>div:nth-of-type(1){box-shadow:0 0 0 10px #06c;border:1px solid #ccc;border-radius:10px;width:200px;height:100px;margin:20px;display:inline-block;}
        #boxShadow3>div:nth-of-type(2){border:10px solid #ccc;border-radius:10px;width:200px;height:100px;margin:20px;display:inline-block;}
        /* inset属性可以设置内阴影 */
        #boxShadow4>div{box-shadow:inset 3px 3px 10px #06c;width:200px;height:100px;margin:20px;}
        /* 内阴影用在img会失效解决方法 */
        #boxShadow5>img{box-shadow:inset 5px 5px 10px #06c;}
        #boxShadow5>div{box-shadow:inset 5px 5px 10px #06c;display:inline-block;}
        #boxShadow5>div>img{position:relative;z-index:-1;}
        /* box-shadow可多层阴影同时使用，每层阴影使用逗号分隔，需注意阴影顺序，第一层阴影太宽，会遮盖后续阴影 */
        #boxShadow6>div:nth-of-type(1){box-shadow:0 0 0 1px red,0 0 0 5px blue,0 0 0 8px green,0 0 0 12px yellow,0 0 0 16px orange;width:100px;height:50px;margin:20px;display:inline-block;}
        #boxShadow6>div:nth-of-type(2){box-shadow:0 0 0 20px red,0 0 0 5px blue,0 0 0 8px green,0 0 0 12px yellow,0 0 0 16px orange;width:100px;height:50px;margin:20px;display:inline-block;}
        /* 3D表单 */
        #boxShadow7>form{box-shadow:0 3px 3px rgba(255,255,255,.1),0 3px 0 #bbb,0 4px 0 #aaa,0 5px 5px #444;border:1px solid #ccc;border-radius:10px;width:450px;margin:10px;padding:5px;}
        #boxShadow7>form input[type=text]{box-shadow:inset 0 5px 10px #ddd;border:1px solid #ccc;border-radius:5px;width:390px;height:20px;padding:5px;outline:none;}
        #boxShadow7>form input[type=submit]{border:1px solid #00748f;border-radius:5px;background:#0483a0;color:#fafafa;padding:5px 10px;}
    </style>
</head>
<body>
    <div id="boxShadow1">
        <div></div>
        <div></div>
        <div></div>
        <div></div><br />
        <div></div>
        <div></div>
        <div></div>
        <div></div><br />
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="boxShadow2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="boxShadow3">
        <div></div>
        <div></div>
    </div>
    <div id="boxShadow4">
        <div></div>
    </div>
    <div id="boxShadow5">
        <img src="images/icon.png" />
        <div>
            <img src="images/icon.png" />
        </div>
    </div>
    <div id="boxShadow6">
        <div></div>
        <div></div>
    </div>
    <div id="boxShadow7">
        <form>
            <div>
                <input type="text" placeholder="Search for..." />
                <input class="btn" type="submit" value="Go" />
            </div>
        </form>
    </div>
</body>
</html>

lulu_jiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子阴影

*{margin:0;padding:0;} /**************************** CSS3盒子阴影属性 ***************************/ /* box-shadow:none | [inset x-offset y-offset blur-radius spreed-radius color],[inset x-of
复制链接

扫一扫

专栏目录