目录
四.圆角边框和阴影
圆角边框
border-radius属性用于设置元素的边框圆角
语法:
div {
border-radius:10px;
}
border-radius半径原理:圆与边框的交集形成圆角效果
注:
- 参数可以时数值或百分比
- 如果是一个正方向想设置为一个圆,把数值修改为高度或宽度的一半即可,或改为50%
- 如果是一个矩形则设置为高度的一半即可
- 该属性是一个简写属性,可以给四个角分别设置:左上角,左下角,右上角,右下角
- 可以分开写:border-top-left-radius:10px; 等等 顺序不可导
效果展示:
盒子阴影
css3中型增加了盒子/文本阴影,我们可以使用box/text-sahdow定义阴影属性
语法:
div {
box-shadow: h-shadow v-shadow blur spread color inset ;
}
例如:
div {
box-shadow: 10px 10px 10px 10px red;
}
属性代表的意义
属性值 | 描述 |
---|---|
h-shadow | 必须;水平阴影位置。允许为负值 |
v-shadow | 必须;垂直阴影位置。允许为负值 |
blur | 可选;模糊距离(阴影清晰度)越小越清晰 |
spred | 可选;阴影尺寸。允许为负值 |
color | 阴影颜色 |
inset | 可选;将外部阴影(outset)改为内部阴影 |
注:
默认的是外部阴影,但是不可以写这个词否则代码无效
盒子阴影不占用空间,不会影响其他盒子排列