CSS3-阴影效果

最新推荐文章于 2022-04-20 20:11:06 发布

只字不留

最新推荐文章于 2022-04-20 20:11:06 发布

阅读量5.7k

点赞数 1

本文链接：https://blog.csdn.net/qq15045846160/article/details/88642023

版权

一、给盒子添加阴影。
box-shadow: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影；
注意：
1、默认情况下是外阴影。
2、阴影扩展是指在原有阴影上继续添加阴影。
3、当box-shadow：水平偏移垂直偏移模糊度；时。默认阴影颜色由盒子里面内容颜色决定。
二、给文字添加阴影。
text-shadow: 水平偏移垂直偏移模糊度阴影颜色；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>阴影</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                /* box-shadow: 0px 0px 0px 0px green; */
                /* box-shadow: 10px 5px 0px 0px green; */
                /* box-shadow: -10px -5px 0px 0px green; */
                /* box-shadow: 10px 10px 10px 0px green; */
                box-shadow: 5px 5px 10px 10px green;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                text-shadow: 5px 5px 2px green;
            }
        </style>
    </head>
    <body>
         <div class="box1">我是粉色的盒子哟！</div>
         <div class="box2">我是粉色的盒子哟！</div>
    </body>
</html>

（1）box-shadow: 10px 5px 0px 0px green;
在这里插入图片描述
（2） box-shadow: -10px -5px 0px 0px green;

（3） box-shadow: 10px 10px 10px 0px green;

（4） box-shadow: 5px 5px 10px 10px green;

（5）文字效果：

只字不留

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS3-阴影效果

一、给盒子添加阴影。box-shadow: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影；注意：1、默认情况下是外阴影。2、阴影扩展是指在原有阴影上继续添加阴影。3、当box-shadow：水平偏移垂直偏移模糊度；时。默认阴影颜色由盒子里面内容颜色决定。二、给文字添加阴影。text-shadow: 水平偏移垂直偏移模糊度阴影颜色；&lt;!DOCTYPE ht...
复制链接

扫一扫