css边框设置阴影样式

简介: css边框设置阴影样式

在css中,给div的边框设置阴影效果主要使用box-shadow属性,但需要注意不同的浏览器需要作不同的处理来提高样式的兼容性。下面介绍如何用CSS实现DIV块的阴影效果。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

示例:

div{
position: absolute;
left: 300px;
top: 300px;
width: 300px;
height: 300px;
box-shadow: 0px 0px 100px 10PX black;
border: 1px solid black;
}

效果如下:

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值 / 说明

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值

blur 可选。模糊距离

spread 可选。阴影的大小

color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

 

相关文章
|
1月前
|
前端开发
css解决li边框重合问题
css解决li边框重合问题
14 0
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
32 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
9天前
|
前端开发
css怎样设置下滑线?
css怎样设置下滑线?
|
12天前
|
前端开发 开发者
CSS3的常见边框汇总
CSS3的常见边框汇总
13 2
|
16天前
|
前端开发
|
19天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
19天前
CSS3设置圆角化
CSS3设置圆角化
|
23天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
21 9