【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】

快秃头的小爽

于 2022-07-22 09:03:29 发布

阅读量300

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52218117/article/details/125924868

版权

css3文字阴影+盒子阴影+过渡+2d转换+3d转换

摘要由CSDN通过智能技术生成

文字阴影text-shadow

text-shadow

后面的值有4个：

第一个：X轴，水平阴影位置允许负值。

第二个：y轴，垂直阴影位置，允许负值。

第三个：blur，模糊的距离

第四个：阴影的颜色

文字阴影代码

<!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>
        /* 文字阴影 
        text-shadow:x y 距离(模糊) 颜色*/
        .p1{
     
        text-shadow:-5px -5px 1px red;
        }
        .p2{
     
            text-shadow:-5px -5px 15px red,10px -10px 15px rgb(245, 106, 7),20px -20px 15px rgba(245, 178, 7, 0.867);
        }
    </style>
</head>
<body>
    <p class="p1">这是段落文字</p>
    <p class="p2">这是段落文字</p>
    <p class="p3">这是段落文字</p>
    <p class="p4">这是段落文字</p>
</body>
</html>

盒子阴影box-shadow

属性值

第一个：X轴，水平阴影位置

第二个：y轴，垂直阴影位置

第三个：blur，模糊的距离

第四个：spread 阴影的大小

第五个：color 阴影的颜色

第六个：inset 从外层的阴影转换为内部的阴影

注意：盒子阴影不影响盒子里面的内容

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta

最低0.47元/天解锁文章

快秃头的小爽

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】

css3文字阴影+盒子阴影+过渡+2d转换+3d转换
复制链接

扫一扫