Css中如何调整盒子的边框
这篇文章主要介绍Css中如何调整盒子的边框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司主营柘城网站建设的网络公司,主营网站建设方案,手机APP定制开发,柘城h5小程序定制开发搭建,柘城网站营销推广欢迎柘城等地区企业咨询
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;
以上是“Css中如何调整盒子的边框”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站名称:Css中如何调整盒子的边框
网站链接:http://azwzsj.com/article/gcpipp.html