HTML 的 box-shadow 介绍

Mars-xq

已于 2023-09-06 09:18:15 修改

阅读量911

点赞数

文章标签： html css css3

于 2023-04-01 11:51:51 首次发布

本文链接：https://blog.csdn.net/sinat_31057219/article/details/129895097

版权

htmldemo演示：

<!DOCTYPE html>
<html class="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#ffffff">
    <style>
        .common {
            border: 10px solid #f00;
            padding: 10px;
            margin: 80px;
            width: 100px;
            height: 100px;
            background: #fff;
        }
        .demo1 {
            box-shadow: 10px 10px #00ff00;
         }
         .demo2 {
            box-shadow: 10px 10px 20px #00ff00;
         }
         .demo3 {
            box-shadow: 10px 10px 40px #00ff00;
         }
         .demo4 {
            box-shadow: 10px 10px 40px 10px #00ff00;
         }
         .demo5 {
            box-shadow: 10px 10px 40px 20px #00ff00;
         }
         .demo6 {
            box-shadow: inset 10px 10px 40px 20px #00ff00;
         }
    </style>
</head>
<!--
box-shadow: offset-x offset-y blur spread color position;

offset-x offset-y
    offset-x 用于声明阴影的水平偏移，就是阴影在 X 轴上的位置。
    当值为正数， 阴影就位于元素右侧，
    若值为负数，阴影位于元素的左侧。
    同理
    offset-y 用于声明阴影的垂直偏移，就是阴影在 Y 轴上的位置。
    当值为正数， 阴影就位于元素下侧，
    若值为负数，阴影位于元素的上侧。
blur 表示阴影的模糊半径。
    值为 0 意味着阴影完全不模糊。
    blur 值越大，边角越不锋利，阴影越朦胧。
    不允许负值，负值等同于 0。
spread 表示阴影的大小。
    当值为正数，阴影会向四周扩展。
    若值为负数， 阴影会收缩，小于元素尺寸。
    默认值 0 会保持阴影和元素尺寸一致。
color 表示阴影的颜色。
position 表示阴影的位置，可选项。
    默认为外部阴影。可以通过使用 inset 关键字来制作内部阴影。
    外部阴影不用声明默认就是，想使用内部阴影需要声明 inset 在最前面最后都可以。
-->

参考：

<!--
参考：
[详解 box-shadow](https://blog.csdn.net/CSDNWuZhiChun/article/details/119751475)
-->

<body style="background:black">
    <div class="common demo1">offset-x offset-y</div>
    <div class="common demo2">blur20</div>
    <div class="common demo3">blur40</div>
    <div class="common demo4">spread10</div>
    <div class="common demo5">spread20</div>
    <div class="common demo6">position</div>
</body>
</html>