李涛自留地
回到顶部
首页 > 前端 > box-shadow在前端中有什么作用？box-shadow在Css3中怎么使用？

box-shadow在前端中有什么作用？box-shadow在Css3中怎么使用？

文章目录

在之前的文章中记载的有Css的border边框属性，而在Css3中新增了一个box-shadow属性，而box-shadow属性和border属性基本上一致，不过box-shadow属性则要比border属性看上去更加的美观和立体化。本文将使用一个实例来记载有关box-shadow在前端页面中有什么作用，以及在Css3中怎么如何使用box-shadow属性。

一、box-shadow在前端中有什么作用？

box-shadow是Css3新增的属性，可以理解为元素新增一个边框阴影区域，效果就是像是Photoshop里面的图片立体投影一样的效果，所以与border比较，选择器添加了box-shadow属性之后在视觉上更加立体。

二、box-shadow属性语法

box-shadow最多可以写入五个值，前四个值为像素值，最后一个值是颜色值。以下是box-shadow的基本语法：

box-shadow: offset-x offset-y blur spread color;

以上语法格式可以理解为以下几个类型的数据：

{box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

前面四个值大多数前端中都会使用PX像素单位，最后一个颜色值既可以使用rgba()、十六制颜色值或者是向下面实例一样使用英文颜色值。

其实关于以上的box-shadow属性语法也没有必要死记硬背，可以随便将前面四个值取一个像素值，然后打开浏览器的开发者工具，逐一调试出自己想要的效果即可。

三、Css3中怎么如何使用box-shadow属性？

笔者认为在Css3中并没有必要对上面的box-shadow属性语法参数死记硬背，以下通过一个对box-shadow使用的实例代码，来看看在Css3中怎么如何使用box-shadow属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-shadow在前端中有什么作用？box-shadow在Css3中怎么使用？</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background-color: #f8f8f8;
            font-size: 16px;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            color: brown;
        }

        .container {
            width: 1024px;
            margin: 0 auto;
        }

        .content {
            margin-top: 30px;
        }

        .pic {
            width: 20%;
            margin: 1%;
            float: left;
            padding: 15px;
        }

        .one {
            box-shadow: 3px 0px 0px 0px red;
        }

        .two {
            box-shadow: 0px 3px 0px 0px red;
        }

        .three {
            box-shadow: 0px 0px 3px 0px red;
        }

        .four {
            box-shadow: 0px 0px 0px 3px red;
        }

        .pic img {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body class="content">
    <main class="container">
        <div class="pic one">
            <img src="img/10.jpg" />
            <div class="title"><a href="https://www.leetao.cc">李涛自留地box-shadow四边阴影测试</div>
        </div>
        <div class="pic two">
            <img src="img/10.jpg"/>
            <div class="title"><a href="https://www.leetao.cc">李涛自留地box-shadow四边阴影测试</div>
        </div>
        <div class="pic three">
            <img src="img/10.jpg"/>
            <div class="title"><a href="https://www.leetao.cc">李涛自留地box-shadow四边阴影测试</div>
        </div>
        <div class="pic four">
            <img src="img/10.jpg"/>
            <div class="title"><a href="https://www.leetao.cc">李涛自留地box-shadow四边阴影测试</div>
        </div>
    </main>
</body>

</html>
box-shadow在前端中有什么作用？box-shadow在Css3中怎么使用？

通过设置四个不同的值来依次观察4个值的区别，然后再用谷歌或者是火狐浏览器打开开发者工具，依次增加或者是减小4个值，直到调试出适合自己想要的那种视觉效果即可，真不用那么可以的去背什么X轴偏移量、Y轴偏移量。

以上李涛自留地从box-shadow在前端中有什么作用？box-shadow属性语法以及Css3中怎么如何使用box-shadow属性三方面对在CSS中如何使用box-shadow，做了一个简单的介绍和记载，其实关键不在于我们死记语法，而在于自己在实操中如何动手实践及有自己的学习方法。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。