css3 阴影

最新推荐文章于 2023-11-26 18:15:02 发布

LygTom

最新推荐文章于 2023-11-26 18:15:02 发布

阅读量591

点赞数

分类专栏： H5，css3

本文链接：https://blog.csdn.net/LygTom/article/details/77905497

版权

H5，css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

4 CSS3阴影
Shadow（阴影）
text-shadow是给文本添加阴影效果，使用 text-shadow 属性给页面上的文字添加阴影效果，text-shadow 属性是在CSS2中定义的，在 CSS2.1 中删除了，在 CSS3 的 text 模块中又恢复了。
text-shadow:5px 2px 2px rgba(64, 64, 64, 0.5),
后面的参数分别是水平偏移量，垂直偏移量上为负数，阴影模糊半径（此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊），后面的RGBA都知道了是颜色和透明度。
text-shadow:5px 2px 2px rgba(64, 64, 64, 0.5),
水平X，竖直Y，前两个参数都可以为负值，即反方向，和定位的left，top类似
也可以设置另外三个边的阴影
.bg2{
width: 100px;
height: 50px;
background-color: blanchedalmond;
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
margin-left:45%; 为了观看的更直白，并没什么用
}
这时可以叫同学做一个以前非主流的文字图片。（动画和阴影结合）
<style>
.transform{
width:400px;
height:100px;
font-size: 35px;
font-family: 楷体;
color: #666666;
animation:BiaoShiFu 0.2s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes BiaoShiFu
{/*改变位置和背景颜色*/
0% {text-shadow:0 5px 1px gray;}
75% {text-shadow:0 5px 1px yellow;}
100% {text-shadow:0 5px 1px red;}
}
</style>
<body>
<div class="transform">
说好
<br>
如果
</div>

2、box-shadow是给元素块添加周边阴影效果。
怎么用对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}
.bg2{
width: 100px;
height: 50px;
background-color: blanchedalmond;
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
margin-left:45%;
}
唯一不同的就是可以在X前面加一个inset，表示内阴影，就是阴影往元素快内显示。
在text-shadow中inset不可用，试试。