CSS中元素的边框border属性

最新推荐文章于 2022-07-08 19:55:06 发布

波哥的技术积累

最新推荐文章于 2022-07-08 19:55:06 发布

阅读量6.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/woshisap/article/details/8481974

版权

css 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

元素的边框一般用来分隔页面的各个部分，在CSS中，边框属性可以分为以下几个属性，包括边框样式(border-style)，边框宽度(border-width)，

边框颜色(border-color)以及边框综合属性(border)等。

顶部边框样式属性：

其中各个属性的含义如下所述：

none：没有边框

hidden：隐藏边框

dotted：边框为点线

dashed：边框为虚线

solid：边框为实线

double：边框为双线

groove：边框为3d凹槽

ridge：边框为菱形

inset：边框为3d凹边

outset：边框为3d凸边

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    .dashed {
	   border-top-style: dashed;
	}
    .dotted {
	    border-top-style: dotted;
	}
	.solid {
	    border-top-style: solid;
	}
	.double {
	   border-top-style: double;
	}
	div {
	  border-top-color: #000000;
	  border-top-width: 5px;
	  width: 500px;
	  height: 30px;
    }
  </style>
 </head>
 <body>
   <div class="dashed"></div>
   <div class="dotted"></div>
   <div class="solid"></div>
   <div class="double"></div>
 </body>
</html>

效果图如下所示：

当然还有其他的一些属性：border-right-style, border-bottom-style, border-left-style, border-top-color, border-right-color, border-bottom-color,

border-left-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-style, border-color, border-width,

border-top, border-right, border-bottom,border-left, border

border-top-width: medium | thin | thick | length

border-right-width: medium | thin | thick | length

border-bottom-width: medium | thin | thick | length

border-left-width: medium | thin | thick | length

medium: 默认的边框宽度。

thin: 小于默认的边框宽度。

thick: 大于默认的边框宽度。

length: 长度值。

border-style用来统一定义边框等显示样式，在边框样式属性中，使用的属性值和相应的边框单侧样式属性相同。

border-color用来统一定义边框的显示颜色，在边框颜色属性中使用的属性值为颜色值。

border-width用来统一定义边框的显示宽度，在边框宽度属性中使用的属性值和相应的边框单侧宽度属性相同。

border-top用来统一定义边框顶部的显示效果，border-top:border-top-style border-top-width border-top-color

border-right:border-right-style border-right-width border-right-color

border-bottom: border-bottom-style border-bottom-width border-bottom-color

border-left: border-left-style border-left-width border-left-color

border:border-style border-width border-color

波哥的技术积累

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中元素的边框border属性

元素的边框一般用来分隔页面的各个部分，在CSS中，边框属性可以分为以下几个属性，包括边框样式(border-style)，边框宽度(border-width)，边框颜色(border-color)以及边框综合属性(border)等。顶部边框样式属性： border-top-style: none | hidden| dotted | dashed | solid |
复制链接

扫一扫