CSS的阴影

最新推荐文章于 2024-04-26 22:14:41 发布

诺坎普的风间

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量1.8k

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端 css阴影盒子阴影文字阴影 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129680427

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的阴影效果。知识学习内容来自b站的 @黑马程序员的视频

CSS的阴影效果包括盒子阴影和文字阴影两种

🔥盒子阴影

CSS借助box-shadow属性来设置盒子的阴影

h-shadow	阴影在水平方向的位置
v-shadow	阴影在垂直方面的位置
blur	阴影的虚实程度
spread	阴影的大小
color	阴影的颜色
inset	把阴影改成内部（一般默认是外部outset，不建议添加）

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            background-color: aqua;
            box-shadow: 10px 10px 10px 10px black;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

如何实现选中盒子才显示阴影

和伪类选择器类似，为div添加:hover。（注意：任何盒子都可以这样写，利用伪类选择器实现）见下面的代码

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            background-color: aqua;
        }

        div:hover {
            box-shadow: 10px 10px 10px 10px black;

        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

阴影不占据位置，所以不用担心影响盒子的大小

盒子添加阴影不会改变自身大小，可以放心添加。

🔥文字阴影

可以利用text-shadow来设置文本的阴影

h-shadow	阴影在水平方向的位置
v-shadow	阴影在垂直方面的位置
blur	阴影的虚实程度
spread	阴影的大小

在实际开发用的不多

<!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>Document</title>
    <style>
        div {
            color: orangered;
            font-size: 50px;
            font-weight: 700;
            text-shadow: 10px 10px rgaba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>
        我是阴影，你是火影
    </div>
</body>

</html>

诺坎普的风间

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的阴影

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的阴影效果。知识学习内容来自b站的@黑马程序员的视频CSS的阴影效果包括盒子阴影和文字阴影两种🔥。
复制链接

扫一扫