box-shadow 属性

box-shadow 属性可以设置一个或多个下拉阴影的框。即为元素设置阴影效果！

语法：box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小，阴影对外扩张的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

默认值:	none
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxShadow="10px 10px 5px #888888"

提示：1）元素边框是什么形状，则投射出来的阴影也是什么形状，比如元素边框是圆的，则阴影也是圆的。2）元素的阴影无论偏移多少，并不会对元素的位置有影响。

编码示例

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>box-shadow</title>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .outDiv {
            width: 800px;
            height: 200px;
            margin: auto;
            border: 1px solid darkred;
            border-radius: 10px;
        }

        .innerDiv {
            float: left;
            width: 150px;
            height: 150px;
            text-align: center;
            border-radius: 10px;
            display: inline-block;
            margin-top: 20px;
        }

        .div1 {
            /**设置元素阴影向右偏移10像素，向下偏移10像素，模糊5px，颜色为 #888888*/
            box-shadow: 10px 10px 5px #888888;
        }

        .div2 {
            /**设置元素阴影向右偏移10像素，向上偏移10像素，模糊10px，颜色为 #888888*/
            box-shadow: 10px -10px 10px #888888;
        }

        .div3 {
            /**设置元素阴影上下左右偏移0像素，模糊5px，阴影对外扩张5像素，颜色为 #888888*/
            box-shadow: 0 0 5px 5px #888888;
            margin-left: 50px;
            border-radius: 0;
        }

        img {
            /**设置元素阴影上下左右不进行偏移，模糊10px，对外扩张5px，颜色为 #554D4D*/
            box-shadow: 0px 0px 10px 5px #554D4D;
            margin-left: 50px;
            border-radius: 50px;
        }

    </style>

</head>
<body>

<div class="outDiv">
    <div class="innerDiv div1">box-shadow: 10px 10px 5px #888888;
        <br>投影在两侧
    </div>
    <div class="innerDiv div2">box-shadow: 10px -10px 10px #888888;
        <br>投影在两侧
    </div>
    <div class="innerDiv div3">box-shadow: 0 0 5px 5px #888888;
        <br>投影在四周
    </div>
    <div class="innerDiv">
        <img src="https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg">
        <span style="white-space: nowrap">box-shadow: 0px 0px 10px 5px #554D4D;</span>
        <span>投影在四周</span>
    </div>
</div>
</body>
</html>

CSS3 box-shadow 设置元素阴影

box-shadow 属性

编码示例

猜你喜欢