CSS 边框
-
CSS边框
CSS border属性允许您指定元素边框的样式,宽度和颜色。我有各方面的边界。
我有一个红色的底边。
我有圆形的边框。
我有一个蓝色的左边框。
-
边框风格
border-style属性指定要显示的边框类型。 允许以下值:- dotted - 定义虚线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义3D凹槽边框。效果取决于边框颜色值
- ridge - 定义3D脊状边界。效果取决于边框颜色值
- inset - 定义3D嵌入边框。效果取决于边框颜色值
- outset - 定义3D开始边框。效果取决于边框颜色值
- none - 没有边界
- hidden - 定义隐藏边框
注意:除非border-style设置了属性,否则下面描述的其他CSS边框属性都不会产生任何影响 !
-
边框宽度
border-width属性指定四个边框的宽度。宽度可以设置为特定大小(以px,pt,cm,em等为单位)或使用三个预定义值中的一个:thin,medium或thick。 border-width属性可以有一到四个值(对于顶部边框,右边框,底部边框和左边框)。 -
边框颜色
border-color属性用于设置四个边框的颜色。 颜色可以通过以下方式设置:- name - 指定颜色名称,如“red”
- 十六进制 - 指定十六进制值,如“#ff0000”
- RGB - 指定RGB值,例如“rgb(255,0,0)”
- transparent(透明)
-
个别边界
从上面的示例中您可以看到,可以为每一侧指定不同的边框。在CSS中,还有用于指定每个边框(顶部,右侧,底部和左侧)的属性 上面的例子给出了与此相同的结果: 工作原理如下: 如果border-style属性有四个值: border-style: dotted solid double dashed;- 顶边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- 顶边框是 dotted
- 左边框和有边框是 solid
- 底边框是 double
- 顶部和底部边框是 dotted
- 左边和右边边框是 solid
- 四边都是 dotted
-
圆角边界
border-radius属性用于向元素添加圆角边框: 注意:border-radiusIE8及更早版本不支持该属性。 -
所有CSS边框属性
属性 描述 border 在一个声明中设置所有边界属性 border-bottom 在一个声明中设置所有底部边框属性 border-bottom-color 设置底部边框的颜色 border-bottom-style 设置底部边框的样式 border-bottom-width 设置底部边框的宽度 border-color 设置四个边框的颜色 border-left 在一个声明中设置所有左边框属性 border-left-color 设置左边框的颜色 border-left-style 设置左边框的样式 border-left-width 设置左边框的宽度 border-radius 设置所有四个边框圆角的半径属性 border-right 在一个声明中设置所有右边界属性 border-right-color 设置右边框的颜色 border-right-style 设置右边框的样式 border-right-width 设置右边框的宽度 border-style 设置四个边框的样式 border-top 在一个声明中设置所有顶部边框属性 border-top-color 设置顶部边框的颜色 border-top-style 设置顶部边框的样式 border-top-width 设置顶部边框的宽度 border-width 设置四个边框的宽度 -
相关页面
HTML教程:HTML样式