#HTML
什么是HTML,和他ML...
网页可以比作一个装修好了的,可以娶媳妇的房子.
房子分为:毛坯房,精装修
毛坯房的修建: 砖,瓦,水泥,石头,石子....
精装修的房子:在毛坯房的基础上进行粉刷,覆盖,雕琢,修饰等操作....
HTML标签 相当于盖毛坯房用的石子,砖瓦....:房子成功,但是不会很好看.
CSS属性 相当于装修时候使用的刷子,涂料,扣板...: 可以让毛坯房变得更加美观
HTML
超文本标记语言. HyperText Markup Language
HTML标签的格式:
格式:
<标签名 属性名="属性值" 属性名="属性值"....>内容</标签名>
注意: 标签可以嵌套使用.嵌套包含时必须被另外一个标签完全包含.
HTML常用标签:
全局架构标签: 网页中必不可少的部分.
<!DOCTYPE html>
<html>
<head>
书写内容不可见的部分;
</head>
<body>
书写内容可见;
</body>
</html>
#BODY体
---
body标签
属性:
bgcolor backgroundcolor 背景颜色
---
标题标签
h1 表示当前页面的最主要内容,一个h1标签在一个页面中军允许使用一次.
h2 表示当前页面的次要内容,允许使用多个.
h3 表示其他信息内容标题,比次要内容等级还要低..
h4 .... 不推荐使用
h5 .... 不推荐使用
h6 .... 不推荐使用
标题标签的作用:
用于书写标题.
标题的标签的特征:
所有标签内容都是粗体,
字体大小从h1-h6逐渐减小
自带回车换行效果
----
样式标签:
b 粗体标签,仅用于表示样式 bold
i 斜体标签 italic
u 下划线标签 underline
strong 粗体标签 ,还在页面中起到一个强调的作用,对搜索引擎而言
em 斜体标签,,还在页面中起到一个强调的作用,对搜索引擎而言,更强烈一点
city 斜体标签,还在页面中起到一个强调的作用,对搜索引擎而言
font 字体样式标签
属性:
color 颜色
size 大小 1-7
face 字体类型,都是在用户的电脑中获取字体类型
----
格式标签:
p 段落标签
hr 水平线标签
br 强制换行标签
注意:hr和br标签比较特殊,这类标签只有开始没有结束,单标签或者自封闭标签
成对标签: <body></body>
单标签: <hr />
----
列表标签:
ul 无序列表 unorder list
格式: 常用与制作导航
<ul>
<li>锄禾日当午</li>
<li>清明上河图</li>
<li>造血干细胞</li>
<li>班长兼学位</li>
</ul>
ol 有序列表 order list
格式:
<ol>
<li>英雄联盟</li>
<li>地下城与勇士</li>
<li>穿越火线</li>
<li>御龙在天</li>
</ol>
注意:有顺序关系的并列内容使用ol,没有顺序关系的列表使用ul.
dl 定义列表 defined list
dt 定义列表的标题
dd 定义列表的属性
定义列表仅用于定义一个事物.
格式:
<dl>
<dt>杜子腾</dt>
<dd>身高:170cm</dd>
<dd>体重:50kg</dd>
<dd>胸围:C-cup</dd>
<dd>性别:女</dd>
</dl>
---
表格标签:
table 用于定义表格的范围
属性:
border: 设置边框的粗细
width: 设置表格的表格的总宽度
height: 设置表格的总高度
align : 设置表格水平方向的对其方式
值: left 左对齐 center 居中对其 right 右对齐
bgcolor: 设置背景颜色
tr 定义表格的行
bgcolor 设置行的背景颜色
td 定义表格的单元格
bgcolor 设置单元格的背景颜色
rowspan 设置单元格的跨行数量
colspan 设置单元格的跨列数量
就近原则概念:
如果具有嵌套关系的标签设置了同一种属性,那么离标签越近的属性优先级别越高.
表格的书写格式:
<table border="1">
<tr>
<td>曹操</td>
<td>张苞</td>
<td>张郎</td>
</tr>
<tr>
<td>曹操</td>
<td>张苞</td>
<td>张郎</td>
</tr>
.....
</table>
th 单元格标签的一种,用法和td是一样的
th标签专门用于制作表格的表头部分,字体默认粗体,水平居中对其
caption 表格描述标签,用于为表格添加一个标题
----
超链接
在网页中,通过点击操作能够打开新的页面的结构就是超级链接,简称超链接.
a 标签
target属性 设置目标地址的打开方式
_self 在当前页面打开 默认值
_blank 在新页面打开
href属性 设置连接的目标地址
在web中的地址问题:
绝对连接: 带有协议的连接就是绝对连接
http://www.itxdl.cn 他的协议是http:// 超文本传输协议
https://www.taobao.com 他的协议是 https:// 带有安全'套接字'的超文本传输协议
ftp:// ftp协议 文件传输协议
ftps://....
file:// 本地文件协议
相对连接: 没有协议的连接就是相对连接
./a/bcd/1.html
../a/bcd/2.html
a/bcd/1.html
. 表示在当前页面所在的文件夹中查找
.. 表示在当前页面所在文件夹的上层文件夹查找
----
图片标签
img标签
src 设置图片来源,图片地址
width 设置图片的宽度
height 设置图片的高度
border 设置图片边框粗细
alt 设置图片描述信息
title 设置图片的描述信息
----
表单标签:
在页面中用于和用户交互的空间都是表单标签.主要作用是向服务器端发送数据.
form 定义表单的范围及表单的提交方式标签
属性:
action 设置当前表单内容的提交地址
method 设置当前表单提交内容的方式,get 和post 方式
get方式: 信息明文传送,可以直接观察到,get方式传输数据量有限.(明信片)
post方式:信息非明文传输,不可以直接观测到,post传输方式数据量非常大.(写信)
enctype 设置传输信息的加密方式
multipart/form-data 上传文件专用
---
input 输入标签
该标签通过改变type属性,可以获取9中不同风格的表单
type="text" 文本输入框
type="password" 密码输入框
type="radio" 单选表单
type="checkbox" 复选表单
type="file" 文件选取表单
type="hidden" 隐藏表单
type="submit" 提交按钮
type="reset" 重置按钮
type="image" 图片提交按钮
input标签常用属性:
type 设置表单类型
name 设置表单名称
value 设置表单值
----
select 下拉列表或者多选列表标签
name 设置表单的名称,value在option中设置
multiple 设置是否为多选列表
下拉列表
<select name="city1">
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="东京">东京</option>
<option value="西京">西京</option>
</select>
多选列表
<select name="city2" multiple>
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="东京">东京</option>
<option value="西京">西京</option>
</select>
option 多选列表的列表标签
textarea 文本域标签/多行文本标签
name 设置表单的名称
cols 设置表单的列数(宽度)
rows 设置表单的行数(高度)
button 自定义按钮标签
type 设置按钮的类型 submit提交按钮 reset 重置按钮 button 普通按钮
----
页面布局标签:
div 用于页面布局操作,没有特殊意义
span 内容标签
块状元素:div
块状元素独占一行
块状元素可以设置宽度高度
内联元素:span
内联元素可以在一行共存
内联元素高度和宽度无效
----
#head头信息
title 设置网站的标题,显示在标签栏中
meta 设置浏览器信息或者设置搜索引擎相关信息
为浏览器设置信息
字符集设置
<meta charset="utf-8" /> H5
<meta http-equiv="content-type" content="text/html;charset=utf-8"> H4
为搜索引擎设置信息
关键字
<meta name="keywords" content="关键字,关键字....." />
描述
<meta name="description" content="写人话,对战网的简洁描述" />
base 基准连接标签
href 为页面中所有相对连接设置一个基础的绝对地址.对绝对连接无效
target 为页面中没有设置target属性的连接,强制设置为当前设定值
##表示颜色的方式
HTML中表示颜色的方式有三种:
英文单词 : red,green,blue....
RGB格式 : R red G green B blue
仅IE支持,不推荐在HTML中使用RGB格式
RGB(红色值,绿色值,蓝色值);
每种颜色的取值 0-255
HEX模式 :
#红色值绿色值蓝色值
#FF9900 红色 FF 绿色99 蓝色00
##SEO和SEM
SEO: 搜索引擎优化,长期的规程要有耐心,不花钱就可以提升自然排名
SEM: 搜索引擎影响,投入金钱,短期见效.
##关于字符集
可以认为字符集就是语言种类
页面字符集:文件本身的字符集类型就是页面字符集.
声明字符集:通知浏览器文件中字符的字符集类型.
保证页面不乱码: 保证页面字符集和声明字符集一致即可.
中文字符集:
utf-8 国际统一字符集,能够表示世界上绝大多数的语言.
gbK 国家标准的扩展版本,包含所有中文文字
gb2312 国家2312标准字符集,包含5000个常用汉字
big5 繁体中文字符集
#HTML和XHTML
XHTML也是超文本标记语言的一种,是严格语法的HTML语种.
HTML规范比较松散:
单标签可以不封闭
属性值 可以使用单双引号也可以不用....
XHTML 8大语法要求:
1.所有标签名和属性名必须小写
2.所有标签必须封闭,单标签需要自封闭
3.所有标签嵌套必须合法
4.所有属性必须有值,multiple值为本身 multiple ="multiple"
5.所有属性必须使用双引号
6.所有图片标签必须使用alt属性
7.所有注释内容中不可以出现-,可以使用=代替横线
8.所有特殊字符必须使用实体字符表示
##HTML中的注释
作用:仅仅用于页面中的内容描述 不会影响显示和效果
格式:
<!--注释内容-->
##实体字符
用于在页面中输出特殊字符的字符格式就是实体字符;
常用实体字符
空格
< 小于号
> 大于号
#关于HTML5
故事讲完了!~
html5标准的改变
html5依旧是松散语法的HTML版本,继承HTML4而来的.
Xhtml5也是被官方默认的一个版本.
1.DTD声明的改变
<!DOCTYPE html>
2.标签的改变
不可以写结束标签的表
br ,hr ,img,....
可以省略结束标签的标签
li,option,tr,td...
可以完全省略的标签
html,head,body,....
##针对搜索引擎的优化
为了让搜索引擎更好的识别和收录页面内容.HTML5为搜索引擎新增了一系列的结构标签
header 用于表示网站结构顶部的标签
footer 用于表示网站底部结构都而标签
aside 用于 表示网站侧边栏的标签
section 用于表示网站主体区域的标签
nav 用于表示网站导航区域的标签
article 用于表示页面文章的标签
figure 用于信息描述的标签
figcaption 用于信息描述的配合标签
hgroup 网站标题组标签
details 信息详解标签
time 时间标签
address 地址标签
mark 标注标签
总结:不要害怕,以上标签都是div标签
##多媒体标签
audio 音频标签
属性:
src 引入音乐文件地址
controls 设置是否具有控制面板属性
loop 设置是否循环播放属性
autoplay 设置是否自动播放属性
<!--音频标签-->
<audio src="./_WStyle.mp3" controls></audio>
<!--兼容性的音频标签写法-->
<audio controls loop>
您的破浏览器不支持该标签
<source src="_WStyle.mp3" type="audio/mp3">
<source src="_WStyle.ogg" type="audio/ogg">
</audio>
video 视频标签
src 引入视频地址
controls 设置是否具有控制面板
poster 设置视频的预览图
width 设置视频的宽度
height 设置视频的高度
autoplay 自动播放视频
<!--简单写法-->
<video src="movie.webm" controls></video>
<!--完整写法-->
<video controls poster="2.jpg" width="1000" height="500">
您的破浏览器不支持视频标签.
<source src="./movie.webm" type="video/webm" />
<source src="./movie.webm" type="video/webm" />
<source src="./movie.webm" type="video/webm" />
</video>
canvas 画布标签
可以用于绘画操作,制作画图板,
可以用于游戏制作....
embed 媒体标签
用于在在页面中引入flash文件
<embed src="旋转的文字.swf" width="500" height="300"></embed>
##智能表单
对HTML4中的表单用法和标签类型进行了扩展.
URL表单 type="url"
邮箱表单 type="email"
电话表单 type="tel"
颜色表单 type="color"
滑块表单 type="range"
搜索表单 type="search"
数字表单 type ="number"
日期表单 type="date"
时间表单 type="time"
周选取表单 type="week"
月选取表单 type="month"
日期时间表单 type="datetime" 仅Opera浏览器识别
日期时间表单 type="datetime-local"
注意:以上所有新增表单都是HTML5为input 标签新增的表单类型
新增的智能表单用法:
在HTML4中 表单标签必须放在Form标签之中才可以被提交到服务器,
如果页面中存在多个form表单并且在页面布局时比较分散,不适合排版很难处理
HTML5中允许将表单标签和form标签进行分离操作:
1.为form标签添加一个id属性
2.为制定的需要提交的属性当前form的表单标签添加form属性,值为form的id值
#CSS
css是什么?
CSS的作用用于修饰页面中的HTML标签.
层叠样式表!
##浏览器
浏览器一共有五大厂商:
IE浏览器 微软公司
chrome浏览器 谷歌
firefox浏览器 MOZ组织
Opera浏览器 欧朋/360
safari浏览器 apple公司
浏览器前缀:
如果CSS属性没有最终实现而是出于实验阶段,使用属性的时候需要对当前CSS进行私有属性标注才可以生效. 标注的部分称之为浏览器私有属性前缀:
IE浏览器 -ms-
chrome浏览器 -webkit-
firefox浏览器 -moz-
Opera浏览器 -o-/-webkit- 早期/后期
safari浏览器 -webkit-
#取值和单位
颜色:
英文单词模式
RGB模式
HEX模式
新增颜色模式
RGBA模式
在RGB模式基础上增加了透明度设置的颜色方式
RGBA(红色值,绿色值,蓝色值,透明度)
透明度的取值 0-1之间的小数 0 完全透明 1 完全不透明
HSL模式
H 色相(颜色的类型) S 饱和度 L 亮度
格式:
HSL(色相,饱和度,亮度);
色相: 0-360的正数
饱和度: 0% -100%
亮度: 0% -100%
HSLA模式
格式:
HSLA(色相,饱和度,亮度,透明度);
透明度的取值 0-1之间的小数 0 完全透明 1 完全不透明
----
长度单位:
px 像素 用于表示一个颜色的点就是像素
像素是一个相对单位,可以有系统进行调整.相对单位
mm 毫米 不允许使用,绝对单位
cm 厘米 不允许使用,绝对单位
em 一个汉字的大小
ex 一个小写x的大小
##CSS的使用方式
分为四种使用方式:
外链式CSS
<link href="one.css" type="text/css" rel="stylesheet" />
导入式CSS
<style>
@import url(./two.css);
</style>
嵌入式CSS
<style>
.three{
width:100px;
height:100px;
background:cyan;
}
</style>
内联式CSS
<div class="four" style="width:100px;height:100px;background:purple;"></div>
##CSS的格式
CSS的具体格式:
CSS选择器{
CSS属性名:属性值;
CSS属性名:属性值;
...
}
CSS的选择器:
用于选中页面中制定的标签添加样式,这种选择的语法就是选择器.
HTML选择器
直接使用HTML标签的名称进行选择,选中所有的同名的HTML标签
标签名{css样式}
CLASS选择器
为需要选取的标签添加class属性,并且定义值,
在CSS中使用.class属性值就可以选取具有class值的标签,可以添加多个元素
.class名{css样式}
ID选择器
为需要选择的页面添加id属性,并且自定义一个值
在CSS中使用#id值就可以选中这个标签,一个页面中禁止出现两个以上的同名ID
#id名{CSS样式}
关系选择器
选中制定标签内部的所有指定标签.
选择器1 选择器2{css样式}
组合选择器
同时使用多个选择器,中间使用逗号分隔,可以选中所有的符合选择器的元素添加样式
选择器1,选择器2{css样式}
通用选择器
* 用于选中页面中的所有标签.使用时需要慎重,并且一般配合组合选择器使用
----
属性选择器
选择器[属性]
选中具有执行属性名称的标签
选择器[属性="值"]
选中具有执行属性且名称和指定名称相同的标签
选择器[属性^="字符"]
选中具有执行属性,且属性以制定字符开头的标签
选择器[属性$="字符"]
选中具有执行属性,且属性以制定字符结尾的标签
选择器[属性*="字符"]
选中具有执行属性,且属性包含制定字符的标签
---
结构选择器
child系列
first-child
格式: 选择器:first-child{CSS样式}
last-child
格式: 选择器:last-child{CSS样式}
nth-child
格式: 选择器:nth-child(位置){CSS样式}
位置可以使用数字,奇偶单词或者带有n的表达式
nth-last-child
格式: 选择器:nth-last-child(位置){CSS样式}
位置可以使用数字,奇偶单词或者带有n的表达式
注意:child系列的选取方式规则:
1.选择符合选择器(:前面的部分)的元素
2.选择所有选中元素的所有父元素
3.找到所有父元素中制定位置的子元素
4.验证第三步中找到的子元素是否符合第一步中用于选中元素的选择器(:前面的部分),如果符合则选中,如果不符合则抛弃
of-type系列
first-of-type
格式: 选择器:first-of-type{CSS样式}
last-of-type
格式: 选择器:last-of-type{CSS样式}
nth-of-type
格式: 选择器:nth-of-type(位置){CSS样式}
位置可以使用数字,奇偶单词或者带有n的表达式
nth-last-child
格式: 选择器:nth-last-of-type(位置){CSS样式}
位置可以使用数字,奇偶单词或者带有n的表达式
注意:of-type系列的选取方式规则:
1.选中页面中所有符合选择器(:前面的部分)的元素
2.选中所有符合选择器元素(:前面的部分)的所有父元素.
3.将所有父元素中所有有符合选择器(:前面的部分)的元素组成一个新的集合
4.在新的集合中选择指定位置的元素
伪类选择器
选择器:link
选中符合选择器的元素的正常连接状态,仅适合于A标签
选择器:hover
选中符合选择器的元素的鼠标经过状态,适用于所有元素
选择器:active
选中符合选择器的元素的点击状态,仅适合于A标签
选择器:visited
选中符合选择器的元素的访问过后的连接状态,仅适合于A标签
伪对象选择器
选择器::first-letter
选中符合选择器的内容中第一个字符,添加样式
选择器::first-line
选中符合选择器的内容中的第一行文字,添加样式
选择器::before
选中符合选择器的内容中的前半部分
选择器::after
选中符合选择器的内容的后半部分
##字体属性
font-size :
设置字体的大小
font-weight:
设置字体的粗细
color :
设置字体的颜色
font-style :
设置是否为斜体
font-family:
设置字体的累心,需要注意依然需要使用本地系统的字体库
##背景属性
background
background-color 设置元素的背景颜色
background-image 设置元素的背景图片
格式:
background-image:url(图片地址);
background-repeat: 设置背景图片的重复方式
重复方式:
repeat 横向和纵向重复
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复
background-position-x: 设置背景图片的横向位置
background-position-y: 设置背景图片的纵向位置
所有位置都可以使用长度单位或者百分比
除此之外,横向位置可以使用left center right 纵向位置 top center bottom
background-size: 设置背景图片的大小
##透明度设置
opacity 设置整个元素的透明度
取值范围 0 -1 0 透明 1不透明
##盒子模型
任何元素在浏览器中都会被以盒子模型的方式进行解析,解析只有具有盒子模型的属性.
margin 外间距
margin: 设置四个方向的外间距
margin-left: 设置元素左侧的外间距
margin-right 设置元素右侧的外间距
margin-bottom 设置元素底部的外间距
margin-top 设置元素顶部的外间距
border 边框
border: 设置边框的综合属性
按照方向划分四个属性
border-top: 设置顶部边框的颜色风格和宽度
border-bottom 设置底部边框的颜色风格和宽度
border-left 设置左侧边框的颜色风格和宽度
border-right 设置右侧边框的颜色风格和宽度
按照值划分三个属性
border-width 设置四个边的宽度
border-style 设置四个边的样式
border-color 设置四个边的颜色
按照值和方向划分12个属性
border-top-width: 设置顶部边框的宽度
border-top-style 设置顶部边框的风格
border-top-color 设置顶部边框的颜色
border-bottom-width: 设置底部边框的宽度
border-bottom-style 设置底部边框的风格
border-bottom-color 设置底部边框的颜色
border-left-width: 设置左侧边框的宽度
border-left-style 设置左侧边框的风格
border-left-color 设置左侧边框的颜色
border-right-width: 设置右侧边框的宽度
border-right-style 设置右侧边框的风格
border-right-color 设置右侧边框的颜色
边框圆角属性
border-radius:边框圆角综合属性,设置四个角
水平和垂直半径相同:
border-radius: 半径;
水平和垂直半径不同:
border-radius: 水平半径/垂直半径;
border-top-left-radius: 设置左上角的圆角
水平和垂直半径相同:
border-top-left-radius: 半径;
水平和垂直半径不同:
border-top-left-radius: 水平半径 垂直半径;
border-top-right-radius: 设置右上角圆角
水平和垂直半径相同:
border-top-right-radius: 半径;
水平和垂直半径不同:
border-top-right-radius: 水平半径 垂直半径;
border-bottom-left-radius: 设置左下角圆角
水平和垂直半径相同:
border-bottom-left-radius: 半径;
水平和垂直半径不同:
border-bottom-left-radius: 水平半径 垂直半径;
border-bottom-right-radius : 设置右下角圆角
水平和垂直半径相同:
border-bottom-right-radius: 半径;
水平和垂直半径不同:
border-bottom-right-radius: 水平半径 垂直半径;
padding 内补白
padding 同时设置四个方向的内间距
padding-left 设置元素左侧的内间距
padding-right 设置元素右侧的内间距
padding-top 设置元素顶部的内间距
padding-bottom 设置元素底部的内间距
注意: border和padding会增加元素的整体大小,margin不会
##布局属性
布局属性的作用就是为了设计页面而存在的CSS属性.
display : 设置元素的显示方式
none 不显示元素
block 显示为块状元素
inline 显示为内联元素
inline-block 显示为行内块状元素
...
float: 设置元素的浮动属性
方式:
left: 左浮动
right: 右浮动
none:不浮动
注意:浮动元素和正常的非浮动元素不在同一个层面,所元素浮动之后,当前元素下面的区域可以存放其他元素,为了防止其他元素在浮动元素之下摆放需要使用clear属性进行设置
clear : 清除浮动元素对当前元素的影响
值:
left 清除左浮动
right 清除右浮动
both 清除左右浮动
visibility: 设置元素是否可见
hidden 设置元素不可见
visible 设置元素可见
注意: visibility设置为hidden时元素不可见但是依旧占用物理空间,而display设置为none时元素不可见,并且不占用物理空间.
overflow: 设置元素中内容溢出的处理方案
值:
visible 超出元素依旧显示内容
hidden 超出元素部分隐藏
scroll 超出元素时添加滚动条
#渐变效果
渐变效果分为两大类:
线型渐变: 单线型渐变和重复的线型渐变
径向渐变: 单径向渐变和重复的径向渐变
单线型渐变
简单渐变:
linear-gradient(颜色,颜色,颜色....)
带有方向的渐变
linear-gradient(方向,颜色,颜色,颜色....)
方向取值:
to top 自下而上进行渐变
to bottom 自上而下进行渐变
to left 从右向左渐变
to right 从左到右渐变
角度取值
带有颜色起始位置的渐变
linear-gradient(方向,颜色 位置,颜色 位置,颜色 位置...);
注意: 在颜色后面进行设置的不是颜色占有的比例而是当前颜色纯色出现的位置,纯色之外采取渐变或者完全纯色填充的原则.
单径向渐变
简单的径向渐变
radial-gradient(颜色,颜色....)
设定形状的径向渐变
radial-gradient(形状,颜色,颜色...);
形状取值: circle 圆形 ellipse椭圆形
设定圆心的径向渐变
radial-gradient(at 圆心坐标 ,颜色,颜色....);
圆心坐标可以使用长度单位,也可以使用位置单词
水平 left center right
垂直 top center bottom
设置渐变终点的径向渐变
radial-gradient(渐变终点,颜色,颜色...);
渐变终点:
closest-side 从圆心渐变到最近的边
closest-corner 丛圆心渐变到最近的角
farthest-side 从圆心渐变到最远的边
farthest-corner 丛圆心渐变到最远的角
长度值
设置颜色位置的径向渐变
radial-gradient(颜色 位置,颜色 位置....);
最完整的径向渐变设置
radial-gradient(形状 渐变终点 at 圆心位置,颜色 位置,颜色 位置...);
重复的线型渐变
repeating-linear-gradient(方向,颜色 位置,颜色 位置...)
一般情况下重复线型渐变仅最后一个颜色设置位置,而且最后一个颜色位置点决定重复的次数
重复次数计算方式 = 100% / 最后一个颜色点的位置百分比
重复的径向渐变
repeating-radial-gradient(形状 渐变终止点 at 圆心坐标 , 颜色 位置,颜色 位置....)
一般情况下重复线型渐变仅最后一个颜色设置位置,而且最后一个颜色位置点决定重复的次数
重复次数计算方式 = 100% / 最后一个颜色点的位置百分比
注意:一般情况下我们设置最开始的颜色和结束颜色一致,保证重复渐变式颜色不会太突兀.
##角度单位
度 deg 一个圆划分为360度
周 turn 一个圆就是一个turn
弧度 rad 一个圆就是2π弧度
梯度 grad 一个圆划分为400梯度