CSS 圆角边框
border-radius 属性用于向元素添加圆角边框:
普通边框
圆角边框
圆角边框
圆角边框
范例
p { border: 2px solid red; border-radius: 5px; }
1. 更多范例
- 一个声明中的所有上边框属性
本例演示简写属性,用于在一条声明中设置上边框的所有属性。 - 设置下边框的样式
本例演示如何设置下边框的样式。 - 设置左边框的宽度
本例演示如何设置左边框的宽度。 - 设置四条边框的颜色
本例演示如何设置四条边框的颜色。它可以拥有一到四种颜色。 - 设置右边框的颜色
本例演示如何设置右边框的颜色。
2. 所有 CSS 边框属性
属性 | 描述 |
---|---|
border | 简写属性,在一条声明中设置所有边框属性。 |
border-color | 简写属性,设置四条边框的颜色。 |
border-radius | 简写属性,可设置圆角的所有四个 border-*-radius 属性。 |
border-style | 简写属性,设置四条边框的样式。 |
border-width | 简写属性,设置四条边框的宽度。 |
border-bottom | 简写属性,在一条声明中设置所有下边框属性。 |
border-bottom-color | 设置下边框的颜色。 |
border-bottom-style | 设置下边框的样式。 |
border-bottom-width | 设置下边框的宽度。 |
border-left | 简写属性,在一条声明中设置所有左边框属性。 |
border-left-color | 设置左边框的颜色。 |
border-left-style | 设置左边框的样式。 |
border-left-width | 设置左边框的宽度。 |
border-right | 简写属性,在一条声明中设置所有右边框属性。 |
border-right-color | 设置右边框的颜色。 |
border-right-style | 设置右边框的样式。 |
border-right-width | 设置右边框的宽度。 |
border-top | 简写属性,在一条声明中设置所有上边框属性。 |
border-top-color | 设置上边框的颜色。 |
border-top-style | 设置上边框的样式。 |
border-top-width | 设置上边框的宽度。 |
CSS margin 属性用于在任何定义的边框之外,为元素周围创建空间。通过 CSS,您可以完全控制外边距。有一些属性可用于设置元素每侧(上、右、下和左)的外边距。Margin - 单独的边;CSS 拥有用于为元素的每一侧指定外边距的属性:margin-top、margin-right、margin-bottom、margin-left