CSS（十九）：盒子阴影、文字阴影

盒子阴影

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>盒子阴影</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: purple;
            /* box-shadow: 10px 10px 10px 10px black; */
            /* box-shadow: 10px 10px 10px 10px black inset; */
        }
        div:hover {
            box-shadow: 10px 10px 10px 10px #ccc;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

文字阴影

text-shadow属性为可以设置
文字阴影

  • 语法

    text-shadow: h-shadow v-shadow blur color;

  • 说明

    属性值 说明
    h-shadow 必须。水平阴影的位置。允许负值
    v-shadow 必须。垂直阴影的位置。允许负值
    blur 可选。模糊距离
    color 可选。阴影的颜色

  • 示例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: purple ;
            text-shadow: 5px 5px 5px #ccc;  
        }
    </style>
</head>
<body>
    <div>
        文字阴影
    </div>
</body>
</html>
posted @ 2022-07-25 16:27  pure3417  阅读(309)  评论(0)    收藏  举报