盒子阴影与文字阴影

最新推荐文章于 2023-12-11 11:51:36 发布

jwz934738949

最新推荐文章于 2023-12-11 11:51:36 发布

阅读量456

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/90488001

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

1、盒子阴影

格式：

box-shadow:水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影；

注意点：

默认情况下，盒子阴影使用外阴影；

通常情况下，使用阴影属性只要使用水平偏移、垂直偏移与模糊度；

如果不设置颜色，阴影的颜色与内容颜色相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c1 {
            height: 200px;
            width: 200px;
            background-color: red;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            box-shadow: 10px 10px 20px 0 blue;
        }

        .c2 {
            height: 200px;
            width: 200px;
            background-color: red;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            box-shadow: 10px 10px 20px 5px inset;
        }
    </style>
</head>
<body>
<div class="c1">外阴影</div>
<div class="c2">内阴影</div>
</body>
</html>

2、文字阴影

格式：

text-shadow:水平偏移垂直偏移模糊度阴影颜色；

注意点：

通常情况下，使用阴影属性只要使用水平偏移、垂直偏移与模糊度；

如果不设置颜色，阴影的颜色与内容颜色相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            text-shadow: 10px 10px 20px blue;
        }
    </style>
</head>
<body>
<div>文字阴影</div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子阴影与文字阴影

1、盒子阴影格式：box-shadow:水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影；注意点：默认情况下，盒子阴影使用外阴影；通常情况下，使用阴影属性只要使用水平偏移、垂直偏移与模糊度；如果不设置颜色，阴影的颜色与内容颜色相同。<!DOCTYPE html><html lang="en"><head> &lt...
复制链接

扫一扫

专栏目录