css怎么设置边框阴影?很多人遇到这类问题都不知道怎么处理,其实利用css加阴影边框是很简单的。在CSS中可以使用Box-shadow属性或filter属性的drop-shadow()来添加阴影边框。
语法:
Box-shadow: h-shadow v-shadow blur spread color inset;
属性值:
● h-shadow:必需设置的值,定义水平阴影的位置。允许负值。
● v-shadow:必需设置的值,定义垂直阴影的位置。允许负值。
● blur:可选设置的值,定义模糊距离。
● spread:可选设置的值,定义阴影的尺寸。
● color :可选设置的值,定义阴影的颜色。如果没有设置值,颜色值基于浏览器显示,建议设置。
● inset:可选设置的值,设置后可将外部阴影 (outset) 改为内部阴影。
示例:
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>css 边框阴影--Box-shadow属性</title>
<style>
.demo{
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);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com
方法2:使用filter:drop-shadow()
filter属性定义了元素(通常是<img>)的可视效果,可以将过滤器效果应用于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:设置阴影颜色;若未设定,颜色值基于浏览器,建议设置颜色。
示例:
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>css 边框阴影--filter:drop-shadow()</title>
<style>
.demo{
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));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。