css如何对上边框加阴影,CSS怎么添加阴影边框？
css怎么设置边框阴影？很多⼈遇到这类问题都不知道怎么处理，其实利⽤css加阴影边框是很简单的。在CSS中可以使⽤Box-shadow属性或filter属性的drop-shadow()来添加阴影边框。
⽅法1：使⽤Box-shadow属性
Box-shadow属性可以向框添加⼀个或多个阴影。
语法：
Box-shadow: h-shadow v-shadow blur spread color inset;
属性值：
●　h-shadow：必需设置的值，定义⽔平阴影的位置。允许负值。
●　v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。
●　blur：可选设置的值，定义模糊距离。
●　spread：可选设置的值，定义阴影的尺⼨。
●　color ：可选设置的值，定义阴影的颜⾊。如果没有设置值，颜⾊值基于浏览器显⽰，建议设置。
●　inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。
⽰例：
css 边框阴影--Box-shadow属性
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #007AFF;
Box-shadow: 10px 10px 10px rgba(0,.5);
/*考虑浏览器兼容性*/
-moz-Box-shadow: 10px 10px 10px rgba(0,.5);
-
webkit-Box-shadow: 10px 10px 10px rgba(0,.5);
}
⽅法2：使⽤filter:drop-shadow()
filter属性定义了元素(通常是)的可视效果，可以将过滤器效果应⽤于web页⾯上的元素。drop-shadow()函数对元素应⽤阴影效果；它接受
h-shadow，v-shadow，blur，spread和color作为值。
语法：
filter:drop-shadow(h-shadow v-shadow blur spread color);
●　h-shadow：设置阴影的⽔平⽅向偏移量；允许负值，负值会使阴影出现在元素左边。
●　v-shadow：设置阴影的垂直⽅向偏移量；允许负值，负值会使阴影出现在元素上⽅。
●　blur：设置阴影的模糊度，值越⼤，越模糊，阴影也就会变得更⼤更淡；不允许负值，若未设定，默认是0 (阴影的边界很锐利)。
●　spread：设置阴影的尺⼨，正值会使阴影扩张和变⼤，负值会是阴影缩⼩；若未设定，默认是0 (阴影会与元素⼀样⼤⼩)。
●　color：设置阴影颜⾊；若未设定，颜⾊值基于浏览器，建议设置颜⾊。
⽰例：
css 边框阴影--filter:drop-shadow()
box shadow怎么设置
width: 200px;
height: 200px;
margin: 50px auto;
background-color: pink;
filter: drop-shadow(10px 10px 10px rgba(0,.5));
/*考虑浏览器兼容性：兼容 Chrome,Safari,Opera */
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,.5));
}
总结
以上是编程之家为你收集整理的CSS怎么添加阴影边框？全部内容，希望⽂章能够帮你解决CSS怎么添加阴影边框？所遇到的程序开发问题。
如果觉得编程之家⽹站内容还不错，欢迎将编程之家⽹站推荐给程序员好友。
本图⽂内容来源于⽹友⽹络收集整理提供，作为学习参考使⽤，版权属于原作者。

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