Css中调整盒子的边框应用

CSS技术利用border系列属性来调整盒子的边框。

1、调整盒子边框的粗细：

border-top-width，设置盒子顶部边框的粗细。

border-right-width，设置盒子右侧边框的粗细。

border-bottom-width，设置盒子底部边框的粗细。

border-left-width，设置盒子左侧边框的粗细。

border-width，设置盒子四个方向边框的粗细。

border-width属性的使用格式：

border-width:top right bottom left;

2、调整盒子边框的颜色：

border-top-color，设置盒子顶部边框的颜色。

border-right-color，设置盒子右侧边框的颜色。

border-bottom-color，设置盒子底部边框的颜色。

border-left-color，设置盒子左侧边框的颜色。

border-color，设置盒子四个方向边框的颜色。

border-color属性的使用格式：

border-color:top right bottom left;

3、调整盒子边框的样式：

border-top-style，设置盒子顶部边框的样式。

border-right-style，设置盒子右侧边框的样式。

border-bottom-style，设置盒子底部边框的样式。

border-left-style，设置盒子左侧边框的样式。

border-style，设置盒子四个方向边框的样式。

border-style属性的使用格式：

border-style:top right bottom left;

border-style属性有如下所示的取值：

none，盒子无边框。

solid，盒子边框为实线。

dashed，盒子边框为虚线。

dotted，盒子边框为点边框。

double，盒子边框为双实线边框。

groove，盒子边框为沟槽状。

ridge，盒子边框为脊状。

inset，盒子边框为凹陷状。

outset，盒子边框为凸出状。

4、设置盒子一个位置的边框效果：

CSS还提供了可以设置盒子单个位置边框效果的属性。

border-top，设置盒子顶部边框的效果。

border-right，设置盒子右侧边框的效果。

border-bottom，设置盒子底部边框的效果。

border-left，设置盒子左侧边框的效果。

使用格式：

border-top:style width color;

例如：border-top:solid 1px #ff0000;

5、设置盒子所有边框具有相同的效果：

CSS技术还提供了可以调整盒子所有边框都具有相同外观的属性。

border，设置盒子四个方向所具备边框外观效果。

使用格式：

border:style width color;

例如：border:solid 1px #ff0000;

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！