css3之边框

边框属性

边框相关属性用于设置边框特征，包括边框颜色，粗细，以及使用的线型，边框的相关属性有如下几个：

border ：这是一个复合属性，用于设置目标元素的边框样式，可以同时设置边框的粗细，线型和颜色。

border-color: 用于设置元素的边框颜色。

border-width: 用于设置边框的宽度。

border-style ：用于设置元素的边框线型，

border-top: 这是一个符合属性，用于设置目标元素的上边框样式，可以同时设置边框的颜色，宽度和线型。

border-top-color: 用于设置目标元素的上边框颜色

border-top-style: 用于设置目标元素的上边框的线型

border-top-width: 用于设置目标元素的上边框的宽度

其它设置右边框、下边框和左边框的方式同上。

线性渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

	默认情况：从上到下
	background-image: linear-gradient(颜色, 颜色,...);
	从左到右to right|left|top|bottom
	background-image: linear-gradient(to right,red,orange);
	对角方式to bottom right
	设置角度90deg
	background-image: linear-gradient(90deg,red,#000);
	使用透明度
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
	重复线性渐变
	background-image: repeating-linear-gradient(red,black 20%,green 10%);
	径向渐变（Radial Gradients）- 由它们的中心定义
	 background-image: radial-gradient(形状 大小 at 位置, 颜色, ...,颜色);
	 形状它可以是值 circle 或 ellipse默认值
	 farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
	 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
	 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
	 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

圆角边框

border-垂直方向-水平方向 -radius:水平半径 垂直半径

圆角方向：通过垂直和水平方向可以表示一个角（方向1：上下、方向2：左右）

圆角半径：水平半径、垂直半径

当圆角半径设置成一个值时，那么另一个值和第一个值一样

当使用%设置半径时，半径的值是元素宽度或高度的百分比

同时设置4个圆角边框时

border–radius:左上角 右上角 下右角 下左角