您的位置 首页 > 数码极客

‘如何给div加边框’如何给div加边框线…

在网页中,边框随处可见,任何块元素和行内元素都可以设置边框属性。例如,div元素可以设置边框,img元素也可以设置边框,table元素也可以设置边框,span元素同样也可以设置边框等等。

目标

  • 设置边框的三要素
  • 简写边框法
  • 单独设置边框


一个元素的边框,同时设置边框的宽度border-width、边框的外观border-style和边框的颜色border-color这三个属性值。


边框

边框的宽度--border-width

在css中,使用border-width属性来定义边框的宽度。


语法:border-width:像素值;


像素值越大,则线条越大。


不同大小的边框宽度


边框的外观--border-style

在CSS中,使用border-style属性来定义边框的外观


语法:border-style:属性值;


属性值有很多种,常用的只有实线和虚线

属性值


常用的是实线边框和虚线边框

各式各样的边框外观


边框的颜色--border-color

在CSS中,使用border-color属性来定义边框的颜色


语法:border-color:颜色值;


说明:颜色值是一个关键字或一个16进制的RGB值。


有颜色的边框


边框简写

在实际中,一般都会使用简写,就要按照顺序来设置属性:border-width、border-style、border-color。


单独设置边框要素,写法很繁琐

没有使用简写


使用简写法,方便简洁

使用了简写


单独边框设置

可以分别针对上下左右四条边框设置单独的样式

border-top(上边框)、border-bottom(下边框)、border-left(左边框)、border-right(右边框)


单独设置

个性的边框

总结

总结

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“如何给div加边框,如何给div加边框线,如何给div加链接,Div加边框”边界阅读