CSS 边框 border 和 outline

CSS - border

span{
	width: 100px;
	height: 100px;
	line-height: 100px;    /** 设置行高等于高,使得文本垂直居中 **/
	text-align: center;
	display: inline-block; /** 改变内联元素 display ,使得可以设置高宽、margin **/
	margin-right: 15px;    /** 外边距,设置两元素的距离 **/
	background-color: #ddd;
	font-size: 12px;
}
.border{ border: 1px solid red; }            /** 设置边框 **/  
.border-top {border-top:1px solid red;}      /** 设置上边框 **/ 
.border-right {border-right:1px solid red;}  /** 设置右边框 **/ 
.border-bottom {border-bottom:1px solid red;}/** 设置下边框 **/ 
.border-left {border-left:1px solid red;}    /** 设置左边框 **/ 

以上实例,效果如下 :

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

border: 1px solid red; 这是简写。顺序为 :

  • border-width - 边框宽度(1px)
  • border-style - 边框样式(solid)
  • border-color - 边框颜色(red)

CSS - 边框样式

border-style 设置边框样式

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

CSS - 边框的圆角

border-radius 设置边框的圆角

border-radius: 5px;

border

CSS - outline 轮廓

div{outline: 5px dotted #00FF00;}

轮廓线不会占据空间,没有圆角。

  • outline-width - 边框宽度(5px)
  • outline-style - 边框样式(dotted)
  • outline-color - 边框颜色(#00FF00)