欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

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;

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r44575.shtml

我要分享到:
上一篇:制作Css垂直导航
下一篇:没有了

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-11-04 10:21 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。