css border-width属性设置边框宽度笔记

原创 国哥笔记  2018-11-07 13:39  阅读 744 views 次

border-width属性定义及用法

在css中,border-width属性是用来设置元素上下左右边框的宽度,它其实是将上下左右边框宽度的四个属性定义在一个声明中,从而减少代码量。

border-width属性可以有1-4个属性值

  1. 当有4个属性值时,分别表示:上边框宽度、右边框宽度、下边框宽度、左边框宽度;
  2. 有3个属性值时,分别表示:上边框宽度、左右边框宽度、下边框宽度;
  3. 有2个属性值时,分别表示:上下边框宽度、左右边框宽度;
  4. 有1个属性值时,分别表示:上下左右边框宽度;

如果要单独为元素的一边设置边框宽度,建议使用以下属性:

border-width属性语法格式

  1. border-widt: 值1 值2 值3 值4;(如:border-widt: 10px 9px 8px 7px;)
  2. border-widt: 值1 值2 值3;(如:border-widt: 10px 9px 8px;)
  3. border-widt: 值1 值2;(如:border-widt: 10px 9px;)
  4. border-widt: 值1;(如:border-widt: 10px;)

border-width属性值说明

  • thin:设置细的边框;
  • medium:设置中等的边框;
  • thick :设置粗的边框;
  • length:自定义边框的宽度;
  • inherit:从父元素继承边框宽度;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-width属性设置边框宽度笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{margin-top:10px;width:360px;border-style:solid;}
#a{border-width:2px 4px 6px 8px;}
#b{border-width:2px 4px 6px;}
#c{border-width:thin thick;}
#d{border-width:thin;}
</style>
</head>
<body>
<div id = "a">上左下右边框宽度分别为2px、4px、6px、8px</div>
<div id = "b">上下边框宽度分别为2px、6px;左右边框宽度为4px</div>
<div id = "c">上下边框宽度分别为细边框;左右边框宽度为粗边框</div>
<div id = "d">上下左右边框的宽度为细边框</div>
</body>
</html>

运行结果:

css border-width属性设置边框宽度笔记

注意

元素单独使用border-width属性是看不出效果的,因为元素边框默认是透明的,对透明的边框设置宽度是看不到效果的,所以使用border-width属性就得定义边框样式(border-style)才有意义。

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/border-width.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情