CSS学习（七）-边框阴影效果（下）

最新推荐文章于 2024-08-25 04:02:20 发布

原创最新推荐文章于 2024-08-25 04:02:20 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css学习同时被 2 个专栏收录

22 篇文章

订阅专栏

css

21 篇文章

订阅专栏

本文继续探讨CSS中的边框阴影效果，通过实例解析如何使用`box-shadow`属性创建各种复杂的阴影样式，包括内阴影、外阴影、模糊半径和颜色等，提升网页元素的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、理论：
1.阴影层级：边框>内阴影>背景图片>背景色>外阴影
2.多层阴影：每层之间用逗号隔开
3.box-shadow兼容性：
a.在现代浏览器新版本无须加前缀，但旧版本需要加
b.ie8以下需要用ie滤镜来模拟实现
c.box-shadow具有多个参数可选，可制作出圆润的阴影效果
二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box-shadow{
            width: 200px;
            height: 100px;
            border:1px solid #cccccc;
            border-radius: 5px;
            box-shadow: inset 3px 3px 10px #06c;
        }
        img {
            width: 200px;
            height: 100px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            box-shadow: inset 3px 3px 10px #06c;
        }
    </style>
</head>
<body>
<div class="box-shadow"></div>
<img src = "images/tabs-image.jpg" alt="" width="200" />
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box-shadow{
            width: 200px;
            height: 100px;
            border:1px solid #0055cc;
            border-radius: 5px;
            box-shadow: -5px 0 5px red,
                        0 5px 5px blue,
                        5px 0 5px green,
                        0 -5px 5px orange;
        }
        .box-shadow1{
            border:50px;
            width: 200px;
            height: 100px;
            border:1px solid #0055cc;
            border-radius: 5px;
            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 #662817,
            0 0 0 20px #062817,
            0 0 0 24px #209359;
        }
        .box-shadow2{
            width: 200px;
            height: 100px;
            border:1px solid #0055cc;
            border-radius: 5px;
            box-shadow:
                0 0 0 24px #209359.
                0 0 0 1px red,
                0 0 0 5px blue,
                0 0 0 8px green,
                0 0 0 12px yellow,
                0 0 0 16px #662817,
                0 0 0 20px #062817;
        }
    </style>
</head>
<body>
<div class="box-shadow" >1</div>
<div class="box-shadow1" >2</div>
<div class="box-shadow2" >3</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #formWrapper{
            width: 250px;
            padding: 0px;
            margin: 20px;
            overflow: hidden;
            border-width: 1px;
            border-style: solid;
            border-color: #6bb2ff #062817 #189356 #291153;
            box-shadow: 0 3px 3px rgba(255,255,255.1),
            0 3px 0 #bbb ,
            0 4px 0 #aaa,
            0 5px 5px #283;
            border-radius: 10px;
            background-color: #f6f6f6 #bababa #aaa #bababa;
            box-shadow: 0 3px 3px rgba(255,232,123,.1),
                        0 3px 0 #bbb ,
                        0 4px 0 #123589,
                        0 5px 5px #183929;
            border-radius: 10px;
            background-color: #298693;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#a6f5f3),to(#196932));
            background-image: -webkit-gradient(top,#a6f821,#f98263);
            background-image: -moz-gradient(top,#a6f821,#f98263);
            background-image: -ms-gradient(top,#a6f821,#f98263);
            background-image: -o-gradient(top,#a6f821,#f98263);
            background-image: linear-gradient(top,#31b231,#103863);
            border-radius:3px;
            text-shadow: 0 1px 0 rgba(0,0,0,.5);
            box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 1px 0 #fff;
        }

        #formWrapper .btn:hover,
        #formWrapper .btn:focus{
            background-color: #31b2c6;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#0483a0),to(#31b2c3));
            background-image: -webkit-gradient(top,#0483a0,#31b2c3);
            background-image: -moz-gradient(top,#0483a0,#31b2c3);
            background-image: -ms-gradient(top,#0483a0,#31b2c3);
            background-image: -o-gradient(top,#0483a0,#31b2c3);
            background-image: linear-gradient(top,#0483a0,#31b2c3);
        }
        #formWrapper .btn:active{
            outline: 0;
            box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
        }
        #formWrapper::-moz-focus-inner{
            border:0;
        }
    </style>
</head>
<body>
    <form id = "formWrapper">
        <div class = "formFiled clearfix">
            <input type = "text" required="" placeholder="Search for Css3 ..." class="search">
            <input type = "submit" class="btn submit" value = "go">
        </div>
    </form>
</body>
</html>