CSS3渐变与边框样式CSS渐变：线性渐变（linear-gradient）与径向渐变（radial-gradient）

「这是我参与2022首次更文挑战的13天，活动详情查看：2022首次更文挑战」

一、渐变

1-1、线性渐变

语法：background:linear-gradient(方向, 开始颜色, 结束颜色)

或者写成background-image:linear-gradient(方向, 开始颜色, 结束颜色)
方向取值有两种：一种是角度（deg） ，一种是关键字：

关键字	对应角度	说明
to top	0deg	从下到上
to bottom	180deg	从上到下（默认值）
to right	90deg	从左到右
to left	270deg	从右到左
to top left	无	从右下角到左上角
to top right	无	从左下角到右上角

多种颜色渐变依次以逗号分隔（线性渐变可以接收一个“值列表”）

如：background:linear-gradient(to right, red, orange, yellow, green, blue);

注意： 线性渐变使用的是background或者background-image属性，而不是background-color属性，使用background-color属性无效！
有多个颜色时，颜色后面还可以跟上百分比来定义它们出现的位置：
- 如：background:linear-gradient(to bottom, red, orange 20%, yellow);
- 表示橙色出现在20%的位置
- 注意百分比与颜色之间用空格分隔
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-CSS3渐变之线性渐变</title>
<style>
  div {
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #DADADA;
    border-radius: 5px;
    font-family: "微软雅黑";
    cursor: pointer;
    background: linear-gradient(to bottom, #F8F8F8, #DCDCDC);
  }
  div:hover {
    color: white;
    background: linear-gradient(to bottom, #FFC556, #FFAF19);
  }
</style>
</head>
<body>
	<div>渐变按钮</div>
</body>
</html>

1-2、径向渐变

径向渐变，指的是颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样）。径向渐变是圆形渐变或椭圆渐变

语法：background: radial-gradient(position, shape size, start-color, stop-color);

或者写成background-image: radial-gradient(position, shape size, start-color, stop-color);
position用于定义圆心位置：

取值	说明
center	中部（默认）
top	顶部
bottom	底部
left	左部
right	右部
top center	靠上居中
top left	左上
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom right	右下
bottom center	靠下居中

shape size 用于定义形状大小，由两部分组成，shape定义形状，size定义大小
- shape取值：ellipse（椭圆形，默认值）、circle（圆形）
- size取值：
  - closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
  - closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
  - farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
  - farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角
start-color和stop-color分别用于定义开始颜色和结束颜色

注意： Chrome和Firefox只能识别以-webkit-作为前缀的径向渐变属性
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14-CSS3渐变之径向渐变</title>
<style>
  div {
    width: 200px;
    height: 150px;
    margin-bottom: 10px;
    line-height: 150px;
    text-align: center;
    color: white;
  }
  #div1 {
    background: -webkit-radial-gradient(center, orange,skyblue);
  }
  #div2 {
    background: -webkit-radial-gradient(top, orange, skyblue);
  }
  #div3 {
    background: -webkit-radial-gradient(ellipse,silver,hotpink);
  }
  #div4 {
    background: -webkit-radial-gradient(circle, silver, hotpink);
  }
  #div5 {
    background: -webkit-radial-gradient(circle closest-side, #23e3fc,#1c499c);
  }
  #div6 {
    background: -webkit-radial-gradient(circle closest-corner, #23e3fc,#1c499c);
  }
  #div7 {
    background: -webkit-radial-gradient(circle farthest-side, #23e3fc,#1c499c);
  }
  #div8 {
    background: -webkit-radial-gradient(circle farthest-corner,  #23e3fc,#1c499c);
  }
  #div9 {
    background: -webkit-radial-gradient(red, orange,yellow, green,blue);
  }
  #div10 {
    background: -webkit-radial-gradient(red 5%, orange 30%,yellow 60%);
  }
  #div11 {
    width: 160px;
    height: 100px;
    border-radius: 80px/50px;
    background: -webkit-radial-gradient(top left, yellow, orangered);
  }
</style>
</head>
<body>
  <div id="div1">center</div>
  <div id="div2">top</div>
  <div id="div3">shape-ellipse</div>
  <div id="div4">shape-circle</div>
  <div id="div5">closest-side</div>
  <div id="div6">closest-corner</div>
  <div id="div7">farthest-side</div>
  <div id="div8">farthest-corner</div>
  <div id="div9">颜色均匀分布</div>
  <div id="div10">颜色不均匀分布</div>
  <div id="div11"></div>
</body>
</html>

二、边框样式

在CSS3中，常见的边框样式包括：

border-radius 圆角效果
box-shadow 边框阴影
border-image 多框背景

2-1、border-radius

语法：border-radius: 取值;

取值是一个长度值，单位可以是px、em和百分比

2-1-1、border-raduis的4种写法：

取值	示例	说明
1个值	border-raduis: 10px;	4个角的圆角半径为10px
2个值	border-raduis: 10px 20px;	左上角与右下角圆角半径为10px，右上角与左下角的圆角半径为20px
3个值	border-raduis: 10x 20px 30px;	左上角圆角为10px，右上角为20px，右下角为30px，左下角未设置那么看对角（右上角）所以为20px
4个值	border-raduis: 10px 20px 30px 40px;	左上角、右上角、右下角、左下角分别为10px 20px 30px 40px

从左上角开始顺时针为每个角赋值，若未赋值则看对角

2-1-2、border-raduis实现半圆和圆：

半圆：

比如上半圆：把高度设为宽度的一半，并且左上角与右上角的半圆半径定义与元素的高度一致；右下角与左下角的圆角半径定义为0

圆：

元素的宽高一致，将4个角的圆角半径设为元素宽/高的一半（或者使用50%）

2-1-3、border-raduis实现椭圆：

语法：border-raduis: x/y;

x表示圆角的水平半径，y表示圆角的垂直半径

实现椭圆：

元素的宽度和高度不相等，其中4个角的圆角水平半径定义为元素宽度的一半，垂直半径定位为元素高度的一半

2-1-4、border-raduis的派生子属性

border-top-left-raduis: 左上角圆角半径
border-top-right-raduis：右上角圆角半径
border-bottom-right-raduis: 右下角圆角半径
border-bottom-left-raduis: 左下角圆角半径

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15-边框样式之border-radius</title>
<style>
  #div1 {
    width: 50px;
    line-height: 50px;
    border-radius: 80% 90% 100% 20%;
    background-color: #E61588;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #div2 {
    width: 100px;
    height: 50px;
    border: 1px solid #E61588;
    border-radius: 50px 50px 0 0;
  }

  #div3 {
    width: 160px;
    height: 100px;
    border: 1px solid #E61588;
    border-radius: 80px/50px; /* 或者border-radius: 50%/50%; */
  }
</style>
</head>
<body>
  <div id="div1">6</div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>
</html>

2-2、box-shadow

语法：box-shadow: x-offset y-offset blur spread color style;

x-offset：水平阴影偏移量
y-offset：垂直阴影偏移量
blur：定义阴影的模糊半径，只能为正数
spread：定义阴影的大小
color：定义阴影的颜色
style：定义是外阴影还是内阴影：
- outset：外阴影，默认值
- inset：内阴影

4个方向独立阴影：

语法：box-shadow:左阴影, 上阴影, 下阴影, 右阴影;(怎么个顺序方式都行)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16-边框样式之box-shadow</title>
<style>
  div {
    width: 200px;
    height: 100px;
    border: 1px solid silver;
    text-align: center;
    line-height: 100px;
  }
  #div1 {
    box-shadow: -5px -5px 8px 0px red;
  }

  /*外阴影*/
  #div4 {
    box-shadow: 0 0 12px 0px red;
  }

  /*内阴影*/
  #div5 {
    box-shadow: 0 0 12px 0px red inset;
  }

  /*四个方向独立阴影*/
  #div6 {
    box-shadow: -5px 0 12px red,
      0 -5px 12px yellow, 
      0 5px 12px blue,
      5px 0 12px green;
  }
</style>
<script>
window.onload = function() {
  let oInput = document.getElementsByTagName("input")[0];
  let oSpan = document.getElementsByTagName("span")[0];
  let oDiv = document.getElementById("div2");
  let oDiv2 = document.getElementById("div3");
  oInput.onchange = function() {
    let value = this.value;
    oSpan.innerText = value;
    oDiv.style.boxShadow = `5px 5px ${value}px 0px red`;
    oDiv2.style.boxShadow = `5px 5px 0px ${value}px red`;
  }
}
</script>
</head>
<body>
  <div id="div1"></div>
  <input min="0" max="25" value="0" type="range">
  <span>0</span>
  <div id="div2"></div>
  <br>
  <div id="div3"></div>
  <br>
  <div id="div4">外阴影</div>
  <br>
  <div id="div5">内阴影</div>
  <br>
  <div id="div6">四个方向独立阴影</div>
</body>
</html>

2-3、border-image

语法：border-image: 图片路径图片切割宽度图片平铺方式;

切割宽度依次表示为上边、右边、下边、左边（顺时针）
平铺方式有3种：repeat、round、stretch
- repeat：4条边的图片会不断重复，超出元素的部分会被剪切掉
- round：4条边的图片会铺满，为了铺满，边框图片会被压缩或拉伸
- stretch：4条边的小方块会拉伸，变长多少就被拉多少

派生子属性：

border-top-image: 上边框背景图片
border-bottom-image: 下边框背景图片
border-left-image: 左边框背景图片
border-right-image: 右边框背景图片