css3教程4-阴影

最新推荐文章于 2022-05-14 16:15:00 发布

梦幻之光_dream

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量162

点赞数

分类专栏： Web前端开发文章标签： css3 前端

本文链接：https://blog.csdn.net/William_fang/article/details/118194262

版权

Web前端开发专栏收录该内容

108 篇文章 10 订阅

订阅专栏

文章目录

一.盒子的外阴影
二.盒内阴影
- 1.代码展示
- 2.效果图
三.文本阴影
篇章

一.盒子的外阴影

1.知识点

盒子阴影：box-shadow

box-shadow: 10px 20px 30px cyan;

box-shadow: 右侧阴影 底部阴影 模糊的程度 阴影的颜色;

总结

数值越大，模糊的程度越大，相当于距离越远。

阴影效果可以重叠,但是要用逗号隔开。

box-shadow: 10px 20px 30px cyan,
            10px 20px 30px blue;

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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
            /* 盒子的外阴影：右侧阴影 底部阴影 模糊的程度 阴影的颜色*/
            /* box-shadow: 20px 20px 20px cyan; */
            box-shadow: 20px 20px 20px cyan,
                        20px 20px 20px blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.效果图

在这里插入图片描述

二.盒内阴影

1.代码展示

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
            /* inset是嵌入的意思 */
            /* 盒子内阴影 */
            box-shadow: inset 10px 20px 30px cyan;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.效果图

在这里插入图片描述

三.文本阴影

1.知识点

文本阴影：text-shadow，用来设置文字的阴影。

文字没有内阴影，只有外阴影。

文本阴影的用法与盒子阴影的用法一致，只是稍微有点区别。

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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
        }
        p{
            font-size: 30px;
            color: white;
            /* 文本阴影 */
            text-shadow: 5px 5px 3px red;
        }
    </style>
</head>
<body>
    <p>学习</p>
</body>
</html>