css左边阴影_案例:单边阴影CSS写法

更新时间:2023-05-09 20:54:20 阅读: 评论:0

css左边阴影_案例:单边阴影CSS写法
之前的⼀篇⽂章主要介绍了周边阴影,⽽没有对阴影特别解释,特别是box-shadow各种值的意思!E {box-shadow:int x-offt y-offt blur-radius spread-radius color}
对象选择器 {text-shadow:投影⽅式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜⾊}
.dv1,.dv2{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.dv1{
box-shadow: -5px 0 5px #ccc, /*左边阴影*/
0 -5px 5px #ccc, /*顶部阴影*/
0 5px 5px #ccc, /*底部阴影*/
5px 0 5px #ccc; /*右边阴影*/
}
.dv2{
box-shadow: -5px 0 5px -5px #ccc, /*左边阴影*/
0 -5px 5px -5px #ccc, /*顶部阴影*/
0 5px 5px -5px #ccc, /*底部阴影*/
5px 0 5px 1px #ccc; /*右边阴影*/
更多案例:
box-shadow: 0 17px 10px 10px #ff8c1a int;
底部阴影数值设置⼤于左右阴影数值,将底部阴影往顶部阴影挤。
代码:box-shadow: 0 17px 10px -8px #ff8c1a int;
将左右阴影设置负值,使阴影脱离盒⼦边框。
代码:box-shadow: -20px -2px 15px -13px #ff8c1a int;
相应可以设置左边和底部单边。

本文发布于:2023-05-09 20:54:20,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/567142.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:阴影   半径   设置
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图