阴影

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

前端日月明

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

阅读量281

点赞数 1

分类专栏： css 文章标签： css3 阴影

本文链接：https://blog.csdn.net/qq_37959401/article/details/78292989

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

box-shadow（该属性可以加在任意元素上）
语法：box-shadow（h-shadow v-shasow blur spread color inset）

h-shadow(水平）：指定水平偏移阴影，正值阴影向右；
v-shadow(垂直）：指定垂直偏移阴影，正值在框底部；
blur（模糊）：默认值为0，正值越大越模糊，负值缩小；
spread（阴影大小）：大于0（默认）就比实体尺寸大；
inset：还有outset（默认）参数；

这里写代码片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阴影</title>
<style>
#shadow{
    box-shadow:10px -10px 5px 10px #888888;
    width:500px;
    padding:5px;
    text-align:center;
    font-size:20px;
    background:#21759b;
    margin:0 auto;
    color:#ffffff;
}
</style>
</head>
<body>
    <div id="shadow">shasow</div>
</body>
</html>

这里写图片描述

box-shadow:10px 10px 5px  #888888;

这里写图片描述

box-shadow:10px 10px 5px  #888888 inset;

这里写图片描述

box-shadow:0px 0px 5px 10px red,10px 10px 5px  #888888;

这里写图片描述
多重阴影：多个阴影值同时设置时，先呈现最先出现的阴影值，后面阴影值比前面的小就会被覆盖。

text-shadow
语法：text-shadow(offser-x offset-y opacity color）

offset-x:X轴的偏移。
offset-y:y轴的偏移。
opacity：模糊效果作用半径。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阴影</title>
<style>
#shadow{
    text-shadow:1px 1px 5px  red;
    width:500px;
    padding:5px;
    text-align:center;
    font-size:20px;
    background:gray;
    margin:30px auto;
    color:#fff;
}
</style>
</head>
<body>
    <div id="shadow">shasow</div>
</body>
</html>