CSS盒模型阴影---box-shadow

最新推荐文章于 2024-03-23 23:56:18 发布

Jmd010814

最新推荐文章于 2024-03-23 23:56:18 发布

阅读量229

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_56839193/article/details/120628774

版权

h-shadow:表示阴影的水平方向偏移的距离，是必填写的变量

v-shadow:表示阴影的垂直方向偏移的距离，是必填写的变量

blur:表示模糊的半径距离可以不写是可选的

spread:表示阴影额外增加的尺寸，负数表示可减少的尺寸，该变量是可选的

color:表示阴影的颜色是可选的

insert: 表示切换为内部阴影变量是可选的

注意：如果需要设置多个阴影，则用逗号将每一个阴影连接起来作为属性值

<!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>CSS盒模型阴影</title>
    <style>
        div {
            border: 1px solid;
            width: 100px;
            height: 100px;
            margin: 20px;
            float: left;
        }
    </style>
</head>

<body>
    <div style="box-shadow: 10px 10px;"></div>
    <div style="box-shadow: 10px 10px 20px;"></div>
    <div style="box-shadow: 10px 10px 20px 5px;"></div>
    <div style="box-shadow: 10px 10px 20px 5px red;"></div>
    <div style="box-shadow: 10px 10px 20px 5px red inset;"></div>
    <br style="clear: both;">
    <div style="border-radius: 10px 10px/10px 10px; box-shadow: 10px 10px;"></div>
    <div
        style="border-radius: 50px 50px/50px 50px; box-shadow: 100px 0px 5px red,200px 0px 10px yellow,300px 0px 15px green;">
    </div>
</body>

</html>

Jmd010814

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型阴影---box-shadow

h-shadow:表示阴影的水平方向偏移的距离，是必填写的变量v-shadow:表示阴影的垂直方向偏移的距离，是必填写的变量blur:表示模糊的半径距离可以不写是可选的spread:表示阴影额外增加的尺寸，负数表示可减少的尺寸，该变量是可选的color:表示阴影的颜色是可选的insert: 表示切换为内部阴影变量是可选的注意：如果需要设置多个阴影，则用逗号将每一个阴影连接起来作为属性值<!DOCTYPE html><html lang="en"&..
复制链接

扫一扫