CSS 边框和轮廓

文章目录

• border
• border-color
• border-style
• border-width
• border-方位
• border-方位-类型
• outline
• outline-color
• outline-style
• outline-width
• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius
• border-image
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

属性	描述	版本
border	复合属性。设置边框的特性。	CSS1
border-color	设置边框颜色。	CSS1
border-style	设置边框样式。	CSS1
border-width	设置边框宽度。	CSS1
border-top/right/bottom/left	设置某个方位边框。	CSS1
border-top/right/bottom/left- color/style/width	设置某个方位边框某种样式。	CSS1
outline	复合属性。设置线条轮廓。	CSS2
outline-color	设置线条轮廓的颜色。	CSS2
outline-style	设置线条轮廓的样式。	CSS2
outline-width	设置线条轮廓的宽度。	CSS2
border-radius	设置圆角边框。	CSS3
border-top-left-radius	设置左上角圆角。	CSS3
border-top-right-radius	设置右上角圆角。	CSS3
border-bottom-left-radius	设置左下角圆角。	CSS3
border-bottom-right-radius	设置右下角圆角。	CSS3
border-image	设置图像来填充边框。	CSS3
border-image-source	规定要使用的图像。	CSS3
border-image-slice	规定图像边框的向内偏移。	CSS3
border-image-width	规定图像边框的宽度。	CSS3
border-image-outset	规定边框图像超过边框的量。	CSS3
border-image-repeat	规定图像边框填充模式。	CSS3

border

border 属性可以在一个声明中设置所有的边框属性。这些属性依次是：border-width, border-style, border-color。

/*边框:宽度2px,实线,红色*/
border: 2px solid red;

border-color

border-color 属性设置四个边框颜色。此属性可以有一到四个值，中间空格隔开。

值	描述
transparent	默认,指定边框的颜色是透明的。
color	CSS颜色值。

/*四条边框都是红色*/
border-color:red;

/*上下是红色，左右是绿色*/
border-color:red green;

/*上是红色，左右是绿色，下是蓝色*/
border-color:red green blue;

/*上是红色，右是绿色，下是蓝色，左是粉色*/
border-color:red green blue pink;

border-style

border-style 属性设置四个边框的样式。此属性可以有一到四个值，中间空格隔开。

值	描述
none	无边框。
hidden	隐藏边框，用于解决表中边框冲突。
dotted	点状边框。
dashed	虚线边框。
solid	实线边框。
double	双线边框。双线的宽度等于边框宽。
groove	3D 凹槽边框。
ridge	3D 垄状边框。
inset	3D inset 边框。
outset	3D outset 边框。

/*上右下左:dotted*/
border-style:dotted;

/*上下:dotted，左右:dashed*/
border-style:dotted dashed;

/*上:dotted，左右:dashed，下:solid */
border-style:dotted dashed solid;

/*上:dotted，右:dashed，下:solid，左:double*/
border-style:dotted dashed solid double;

例:各种值的显示结果

<style>
  div{
    height: 30px;
    width: 350px;
    margin:10px;
    border-width: 10px;
    border-color: #ccc;
    text-align: center;
  }
  .div1{ border-style:dotted; }
  .div2{ border-style:dashed; }
  .div3{ border-style:solid; }
  .div4{ border-style:double; }
  .div5{ border-style:groove; }
  .div6{ border-style:ridge; }
  .div7{ border-style:inset; }
  .div8{ border-style:outset; }
</style>

<div class="div1">dotted</div>
<div class="div2">dashed</div>
<div class="div3">solid</div>
<div class="div4">double</div>
<div class="div5">groove</div>
<div class="div6">ridge</div>
<div class="div7">inset</div>
<div class="div8">outset</div>

border-width

border-width 属性设置四个边框的宽度。此属性可以有一到四个值，中间空格隔开。

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	数值单位。

/*上右下左:10px*/
border-style:10px;

/*上下:10px，左右:20px*/
border-style:10px 20px;

/*上:10px，左右:20px，下:30px */
border-style:10px 20px 30px;

/*上:10px，右:20px，下:30px，左:40px*/
border-style:10px 20px 30px 40px;

border-方位

下列属性用于设置某一边的边框，取值和 border 属性的取值相同:
border-top 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框

border-top:1px solid red;
border-right:2px solid red;
border-bottom:3px solid red;
border-left:4px solid red;

border-方位-类型

下列属性用于设置某一边某个类型的边框样式:
border-top/right/bottom/left-color/style/width

border-top-color:green;
border-bottom-width:5px;

outline

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
该属性在一个声明中可设置所有的轮廓属性依次是：outline-width, outline-style, outline-color

/*四边轮廓宽2px, 实线, 红色*/
outline:2px solid red;

outline 是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。
outline 不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
outline 不占用空间，所以不会影响元素的空间位置。

outline-color

outline-color 属性指定轮廓颜色。

值	描述
invert	默认。逆向的颜色使轮廓在不同的背景颜色中都是可见。
color	CSS颜色值。

outline-color: red;
outline-color: #ff0000;
outline-color: rab(255,0,0);

outline-style

outline-color 属性指定轮廓样式。

值	描述
none	无轮廓。
dotted	点状轮廓。
dashed	虚线轮廓。
solid	实线轮廓。
double	双线轮廓。双线的宽度等于轮廓宽。
groove	3D 凹槽轮廓。
ridge	3D 垄状轮廓。
inset	3D inset 轮廓。
outset	3D outset 轮廓。

outline-style:dotted;
outline-style:groove;

outline-width

outline-width指定轮廓的宽度。

值	描述
thin	定义细的轮廓。
medium	默认。定义中等的轮廓。
thick	定义粗的轮廓。
length	数值单位。

outline-width: 20px;

border-radius

border-radius 属性可以在一个声明中设置4个边框角。有一到四个值。

值	描述
length	使用数值单位。
%	使用%定义角落的形状。

<style>
  div{
	width: 40px;
	height: 40px;
	border:1px solid red;
  }
  .div1{ /*四角弧度半径50%; 等同 border-radius:20px*/
    border-radius: 50%;  
  }
  .div2{ /*左上和右下:5px, 右上和左下:10px*/
    border-radius:5px 10px;
  }
  .div3{ /*左上:5px, 右上和左下:10px，左下:15px*/
    border-radius:5px 10px 15px;
  }
  .div4{ /*左上:5px, 右上:10px, 左下:15px, 左下:20px，*/
    border-radius:5px 10px 15px 20px;
  }
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>

例:细分到每一个角边时用 “/” 隔开

width: 100px;
height: 60px;
border:1px solid red;
border-radius:10px 15px 20px 25px / 30px 35px 40px 45px;  

width: 100px;
height: 60px;
border:1px solid red;
border-radius:15px 20px 30px / 25px 40px;  

border-top-left-radius

border-top-left-radius 属性设置左上角圆角。

值	描述
length	使用数值单位。
%	使用%定义角落的形状。

border-top-left-radius:2em;
border-top-left-radius:20px 30%;

border-top-right-radius

border-top-right-radius 属性设置右上角圆角。

值	描述
length	使用数值单位。
%	使用%定义角落的形状。

border-top-right-radius:2em;
border-top-right-radius:20px 30%;

border-bottom-left-radius

border-bottom-left-radius 属性设置左下角圆角。

值	描述
length	使用数值单位。
%	使用%定义角落的形状。

border-bottom-left-radius:2em;
border-bottom-left-radius:20px 30%;

border-bottom-right-radius

border-bottom-right-radius 属性设置右下角圆角。

值	描述
length	使用数值单位。
%	使用%定义角落的形状。

border-bottom-right-radius:2em;
border-bottom-right-radius:20px 30%;

border-image

border-image 属性可以在一个声明中设置所有的图像边框属性。这些属性依次是： border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat。

语法: border-image: source slice width outset repeat

<style>
  span{
  	float: left;
  	height: 100%;
  	width: 100%;
  	background: #aaa;
  	text-align: center;
  }
  div{
  	float: left;
  	margin:15px;
	width: 100px;
	height: 20px;
	border: 30px solid #fff;
	outline: 1px solid red;
  }
  .div1{  
  	border-image: url(bd.jpg); 
  }
  .div2{  /*四边内偏移:30px*/
  	border-image: url(bd.jpg) 30; 
  }
  .div3{  /*四边内偏移:30px, 四边宽:20px*/
  	border-image: url(bd.jpg) 30/20px; 
  }
  .div4{  /*四边内偏移:30px, 四边宽:20px, 四边外偏移:10px*/
  	border-image: url(bd.jpg) 50%/20px/8px; 
  }
  .div5{  /*四边内偏移:30px, 四边宽:20px, 四边外偏移:10px, 填充方式:round*/
  	border-image: url(bd.jpg) 30/20px/10px round; 
  }
  .div6{ 
  	border-image: url(bd.jpg) 30 20/10px 15px 20px 30px;; 
  }
  .div7{ 
  	border-image: url(bd.jpg) 30/20px/5px 10px 15px 20px;
  }
  .div8{ 
  	border-image: url(bd.jpg) 30 round; 
  }
</style>
<div class="div1"><span>div1</span></div>
<div class="div2"><span>div2</span></div>
<div class="div3"><span>div3</span></div>
<div class="div4"><span>div4</span></div>
<div class="div5"><span>div5</span></div>
<div class="div6"><span>div6</span></div>
<div class="div7"><span>div7</span></div>
<div class="div8"><span>div8</span></div>

border-image-source

border-image-source属性指定要使用的图像，替代 border-style 属性样式。

值	描述
none	没有图像被使用
image	边框使用图像的路径

border-image-source: url(border.png);

border-image-slice

border-image -slice 属性指定图像的边界向内偏移。

此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。

值	描述
fill	保留图像的中间部分
number	数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
%	百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度

border-image-slice: 30;
border-image-slice: 50% 50%;

border-image-width

border-image -width属性指定图像边框的宽度。

border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。

值	描述
auto	宽度是相应的image slice的内在宽度或高度
number	表示相应的border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积

border-image-width: 2;
border-image-width: 15px 15px 15px;
border-image-width: 15px 2 15px 20px;

border-image-outset

border-image-outset 属性指定向外的偏移量(溢出边框外的量)。

border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。

值	描述
length	数值单位，默认为0。
number	border-width 的倍数。

border-image-outset: 2;
border-image-outset:5px 10px;
border-image-outset:1 5px 10px 20px;

border-image-repeat

border-image-repeat 属性设置图像是否应重复、拉伸或铺满。

该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

值	描述
stretch	默认值。拉伸图像来填充区域
repeat	平铺（repeated）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space	类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围。

border-image-repeat: repeat;
border-image-repeat: round;

来源：CSDN

作者：shenwen5225

链接：https://blog.csdn.net/shenwen522519753/article/details/103694564