前端学习笔记：盒子阴影和文字阴影

最新推荐文章于 2024-07-26 14:52:36 发布

西樱studio

最新推荐文章于 2024-07-26 14:52:36 发布

阅读量145

点赞数

分类专栏：前端学习文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43339892/article/details/119959838

版权

前端学习专栏收录该内容

39 篇文章 0 订阅

订阅专栏

盒子阴影

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

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

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

测试样例

<!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>盒子阴影</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }

        div:hover {
            box-shadow: 25px 20px 14px -4px rgb(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

文字阴影

语法：text-shadow: h-shadow v-shadow blur color;

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

测试样例

<!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>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 1px rgba(0 0 0 / 30%);
        }
    </style>
</head>
<body>
    <div>
        穿越时空的少年
    </div>
</body>
</html>