CSS 框线样式

Html 网页中的元素，其框线表达样式 border-style 预设值为 none 为没有边线，需要设定其值才会显示出边线。

border-top: /* 上框线 */
border-bottom: /* 下框线 */
border-left: /* 左框线 */
border-right: /* 右框线 */
border: /* 四边框线 */
border-width: /* 边线宽度 */

设定四周边线的三个主要参数：宽 border-width、颜色 border-color、型态 border-style

border-width:1px; border-color:#939699; border-style:solid;

border:1px solid #939699;
border-left:5px solid #939699;
border-right:5px solid #939699;
border-bottom:1px solid #939699;

四边不同框线一般可缩写为

border:solid;border-width:1px 2px 4px 8px;border-color:#369 #585 #060 #030;

border-width:5px;border-color:#009ac9;border-style:dashed solid;

边线的风格样式

边线的宽度于不同的风格样式下、有些不同的效果、不同的浏览器于立体框颜色显示亦不同。

border-style:solid /* 实线框 */
border-style:dotted /* 点线框 */
border-style:dashed /* 分段线 */
border-style:double /* 双线框 */
border-style:groove /* 立体内凸框 */
border-style:ridge /* 立体浮凸框 */
border-style:inset /* 凹框 */
border-style:outset /* 凸框 */

border-width:1px; border-color:#939699;

border-width:2px; border-color:#939699;

border-width:3px; border-color:#939699;

border-width:5px; border-color:#939699;

框线样式应用 CSS Border Application

使用 border-style:dotted 或 border-style:dashed 常出现浏览器不同而显示出不同的点线。使用 linear-gradient 来显示，控制点的大小 background-size: 6px 2px、点的方向 Horizontal 或 Vertical background-repeat: repeat-x 及颜色等。

div{
background-image:linear-gradient(to right, #009ac9 33%, rgba(255,255,255,0) 0%);
background-position:bottom;
background-size:6px 2px;
background-repeat:repeat-x;
height:20px; /* 如果容器内没有元素需加高度 */}

四周点线亦可使用不同颜色显示。

div{
background:linear-gradient(to right,orange 50%,rgba(255,255,255,0) 0%),
  linear-gradient(blue 50%,rgba(255,255,255,0) 0%),
  linear-gradient(to right,green 50%,rgba(255,255,255,0) 0%),
  linear-gradient(red 50%,rgba(255,255,255,0) 0%);
background-position:top,right,bottom,left;
background-repeat:repeat-x,repeat-y;
background-size:6px 2px,2px 6px;
height:100px;}

使用 linear-gradient 渐层颜色表达框线。

div{background-color:#f3f6f9;border:solid;
border-image:linear-gradient(90deg,rgba(90,90,90,0),rgba(90,90,90,1),rgba(90,90,90,0)) 100% 0;
border-width:3px;
height:80px;}