html中用css设置盒子阴影和文字阴影

最新推荐文章于 2023-02-26 19:16:58 发布

黄丫丫07

最新推荐文章于 2023-02-26 19:16:58 发布

阅读量293

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_51495354/article/details/127825708

版权

盒子阴影：

语法：

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">

    <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: 200px;

            height: 200px;

            background-color: pink;

            margin: 100px auto;



        }



        div:hover {

            box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, .3);

        }

    </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">

    <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: aquamarine;

            font-weight: 700;

            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);

        }

    </style>

</head>



<body>

    <div>

        你是阴影，我是火影。

    </div>

</body>



</html>