盒子模型-边框

宽度border-width

-可指定4个方向的边框宽度

• 取值和有效范围

值的个数	有效范围
四个值	上、 右、下、左
三个值	上、右左、下
两个值	上下、右左
一个值	上下右左

/*按顺时针方向*/
div{
	border-width:10px 20px 30px 40px;
	border-width:10px 20px 30px;
	border-width:10px 20px;
	border-width:10px;
}

• 还可用border-xxx-width单独指定某一方向的边框,xxx代表top、right、bottom或left

  div{
  	border-top-width:10px;
  	border-right-width:10px;
  	border-bottom-width:10px;
  	border-left-width:10px;
  }
  

   

  颜色border-color

  • 值的情况和border-width一样
  • 和border-width一样，也有border-xxx-color
  • 若省略border-color，则使用元素color的颜色
    • color不仅设置字体颜色，它表示的是前景色，与之对应的是background-color表示背景色

  div{
  	color:red;
  		
    	border-width:10px;
    	border-style:solid;
  }
  

  显示效果
  
   

  样式border-style

  • 值的情况和border-width一样，值包括
    • solid 实线
    • dotted 点状虚线
    • dashed 虚线
    • double 双线
    • none 默认值，表示没有边框
  • 和border-width一样，也有border-xxx-style

  div{
   	border-style:solid dotted dashed double;
  }
  

  显示效果
  
   

  boder的简写方法

  • 开发中常用，3个样式的顺序没有要求

   div{
   	  border:10px orange solid;
   }

• border-xxx也有简写方法，用法和xxx的值与上面一样