一、圆角边框
在CSS3中,新增了圆角边框
样式,这样盒子就可以变圆角了。
border-radius
属性用于设置元素的外边框圆角。
语法:
border-radius:length;
radius
半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果。
- 参数值可以为
数值
或百分比
形式。 - 如果是
正方形
,想要设置一个圆,把数值修改为高度或者宽度的一半
即可,或者直接写为50%
如果是个矩形,设置为高度的一半就可以做
和右上角发布文章一样的圆角边框- 该属性是一个简写属性,分别代表左上角、右上角、右下角、左下角
- 分开写:
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
二、盒子阴影
CSS3中新增了盒子阴影,可以使用box-shadow
属性为盒子添加阴影。
语法:
box-shadow:h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值 |
v-shadow | 必需,垂直阴影的位置,允许负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
inset | 可选,将外部阴影(outset)改为内部阴影 |
注意:
- 默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效;
- 盒子阴影不占用空间,不影响其他盒子排列。
三、文字阴影
在CSS3中,可以用text-shadow
属性将阴影应用于文本。
语法:
text-shadow:h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值 |
v-shadow | 必需,垂直阴影的位置,允许负值 |
blur | 可选,模糊的距离 |
color | 可选,阴影的颜色 |