CSS|15 CSS3文本阴影&盒子阴影

最新推荐文章于 2026-04-17 11:23:10 发布

原创最新推荐文章于 2026-04-17 11:23:10 发布 · 1.1k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #前端

前端专栏收录该内容

27 篇文章

订阅专栏

15.5 文本阴影

text-shadow:水平阴影垂直阴影模糊距离阴影颜色
注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色

描述：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 垂直阴影正值阴影在下边，负值在上边
- 模糊强度，值越大越模糊

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style type="text/css">
        .box{
            font-size: 40px;
            font-family: "楷体";
            color: #7B68EE;
            /*给文本设置阴影*/
            /*text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色*/
            text-shadow: 3px 3px 3px #90EE90;
        }
        .box_two{
            font-size: 50px;
            font-family: "隶书";
            color: #008B00;
            text-shadow: 4px 2px 2px #FF69B4,-4px -4px 3px #C1CDC1;
        }
    </style>
</head>
<body>
    <div class="box">黑马程序员</div>
    <div class="box_two">江苏科技大学JUST</div>

</body>
</html>

在这里插入图片描述

15.6 盒子阴影

box-shadow:水平阴影垂直阴影阴影的清晰度阴影的大小阴影的颜色阴影的位置 inset outset(默认值)
水平阴影和处置阴影必须得写，其余的是可以省略不写的。

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

注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值为0.

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值。
blur	可选，模糊的距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色
inset	可选，将外部阴影(outset)改为内部阴影

描述：
- 盒子阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边

案例一:盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border:1px solid #000;
            /*给这个盒子设置阴影
            语法格式：
            box-shadow:水平阴影 垂直阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置 inset outset(默认值)
            */
            box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #DA70D6 inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

案例二：给图片设置阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给图片设置阴影</title>
    <style type="text/css">
        img{
            box-shadow: 6px 6px 6px 6px #FFA07A;
        }
    </style>
</head>
<body>
    <img src="../img/jyff1.jpg" alt="">
</body>
</html>