H5C3基础学习总结之CSS3盒子阴影

程序猿tu

已于 2022-02-02 16:10:16 修改

阅读量1k

点赞数

分类专栏： HTML/CSS 文章标签： css3 css html5

于 2022-02-02 15:07:49 首次发布

本文链接：https://blog.csdn.net/qq_41171409/article/details/122769649

版权

HTML/CSS 专栏收录该内容

17 篇文章 8 订阅

订阅专栏

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须。水平阴影的位置。允许负值。
v-shadow	必须。锤子阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）修改为内部阴影

注意细节：

默认的是外阴影（outset）。但是不可以写这个单词，否则会导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            /*设置盒子阴影*/
            box-shadow: 0px 0px 20px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

结果：

程序猿tu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5C3基础学习总结之CSS3盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。语法：box-shadow: h-shadow v-shadow blur spread color inset;值描述 h-shadow 必须。水平阴影的位置。允许负值。 v-shadow 必须。锤子阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。 inse
复制链接

扫一扫