CSS3-美化网页元素

喜欢ヅ旅行 2022-05-14 08:49 242阅读 0赞

**为什么使用****CSS？**

1.**有效的传递页面信息**

2.**使用****CSS****美化过的页面文本，使页面漂亮、美观，吸引用户**

3.**可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容**

4.**具有良好的用户体验**

**标签 的作用：****能让某****几****个文字或者某个词语凸显出来**

**示例：**

享受“北大式”教育服务
 在北大青鸟，有一群人默默支持你成就
 IT梦想
 选择北大青鸟，成就你的梦想

**字体样式：**

<table style="width:593px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:135px;"> 属性名 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:224px;"> 含义 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:231px;"> 举例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:135px;"> font-family </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:224px;"> 设置字体类型 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:231px;"> font-family:"隶书"; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:135px;"> font-size </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:224px;"> 设置字体大小 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:231px;"> font-size:12px; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:135px;"> font-style </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:224px;"> 设置字体风格 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:231px;"> font-style:italic; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:135px;"> font-weight </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:224px;"> 设置字体的粗细 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:231px;"> font-weight:bold; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:135px;"> font </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:224px;"> 在一个声明中设置所有字体属性 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:231px;"> font:italic bold 36px "宋体"; </td> 
 </tr> 
 </tbody> 
</table>

**字体类型：**

**font-family****属性**

p{font-family:Verdana,"楷体";}
    
    
    body{font-family: Times,"Times New Roman", "楷体";}

**字体大小：**

**font-size****属性**

**单位：**1.**px****（像素）               **2.**e****m****、****rem****、****cm****、****mm****、****pt****、****pc**

**示例：**

h1{font-size:24px;}
    h2{font-size:16px;}
    h3{font-size:2em;}
    span{font-size:12pt;}
    strong{font-size:13pc;}

**字体风格：**

**font-style属性：****normal（正常字体）****、****italic（斜体字）****和****oblique**

**字体的粗细：**

**font-weight****属性**

<table style="width:655px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:249px;"> 值 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:405px;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:249px;"> normal </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:405px;"> 默认值，定义标准的字体 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:249px;"> bold </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:405px;"> 粗体字体 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:249px;"> bolder </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:405px;"> 更粗的字体 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:249px;"> lighter </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:405px;"> 更细的字体 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:249px;"> 100、200、300、400、500、600、700、800、900 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:405px;"> 定义由细到粗的字体 400等同于normal，700等同于bold </td> 
 </tr> 
 </tbody> 
</table>

** ****字体属性**

**        ****font****属性：****字体属性的顺序：字体风格→字体粗细→字体大小→字体类型**

**示例：**

p span{font:oblique bold 12px "楷体";}

**文本属性：**

<table style="width:546px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:155px;"> 属性 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:181px;"> 含义 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:208px;"> 举例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:155px;"> color </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:181px;"> 设置文本颜色 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:208px;"> color:#00C; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:155px;"> text-align </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:181px;"> 设置元素水平对齐方式 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:208px;"> text-align:right; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:155px;"> text-indent </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:181px;"> 设置首行文本的缩进 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:208px;"> text-indent:20px; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:155px;"> line-height </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:181px;"> 设置文本的行高 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:208px;"> line-height:25px; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:155px;"> text-decoration </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:181px;"> 设置文本的装饰 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:208px;"> text-decoration:underline; </td> 
 </tr> 
 </tbody> 
</table>

**文本颜色：**

**color****属性：**

**RGB：1.****十六进制方法表示颜色：****前****两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量**

**            2.rgb****(****r,g,b****) :** **正整数****的取值为****0****～****255**

**RGBA：****在****RGB****基础上增加了控制****alpha****透明度的参数，其中这个透明通道值为****0****～****1**

**示例：**

color:#A983D8;
    color:#EEFF66;
    color:rgb(0,255,255);
    color:rgba(0,0,255,0.5);

**排版文本段落**

<table style="width:442px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:93pt;"> 值 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:315px;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:93pt;"> left </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:315px;"> 把文本排列到左边。默认值：由浏览器决定 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:93pt;"> right </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:315px;"> 把文本排列到右边 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:93pt;"> center </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:315px;"> 把文本排列到中间 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:93pt;"> justify </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:315px;"> 实现两端对齐文本效果 </td> 
 </tr> 
 </tbody> 
</table>

**文本修饰和垂直对齐**

**文本装饰：****text-decoration****属性**

**垂直对齐方式：****vertical-align****属性：****middle****、****top****、****bottom**

<table style="width:435px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:126pt;"> 值 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:265px;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:126pt;"> none </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:265px;"> 默认值，定义的标准文本 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:126pt;"> underline </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:265px;"> 设置文本的下划线 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:126pt;"> overline </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:265px;"> 设置文本的上划线 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:126pt;"> line-through </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:265px;"> 设置文本的删除线 </td> 
 </tr> 
 </tbody> 
</table>

**文本阴影-****语法：**

text-shadow : color（阴影颜色）  x-offset（X轴位移，用来指定阴影水平位移量）  y-offset（Y轴位移，用来指定阴影垂直位移量）  blur-radius;（阴影模糊半径，代表阴影向外模糊的模糊范围）

**浏览器兼容性**

<table style="width:467px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:112px;"> 属&nbsp; 性&nbsp; 名 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:60px;"> IE </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:71px;"> Firefox </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:82px;"> Chrome </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:73px;"> Opera </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:66px;"> Safari </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:112px;"> Text-shadow </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:60px;"> 9+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:71px;"> 3.5+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:82px;"> 2.0+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:73px;"> 9.6+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:66px;"> 4.0+ </td> 
 </tr> 
 </tbody> 
</table>

**超链接伪类**

**伪类样式-语法：****标签名****:****伪类名****\{** **声明****;\}**

a:hover {
    	color:#B46210;
    	text-decoration:underline;
    }

![70][]

访问时，橙色        访问后变紫色

**使用****CSS****设置超链接**

<table style="width:491px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:105px;"> 伪类名称 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:202px;"> 含义 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:181px;"> 示例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:105px;"> a:link </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:202px;"> 未单击访问时超链接样式 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:181px;"> a:link{color:#9ef5f9;} </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:105px;"> a:visited </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:202px;"> 单击访问后超链接样式 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:181px;"> a:visited {color:#333;} </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:105px;"> a:hover </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:202px;"> 鼠标悬浮其上的超链接样式 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:181px;"> a:hover{color:#ff7300;} </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:105px;"> a:active </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:202px;"> 鼠标单击未释放的超链接样式 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:181px;"> a:active {color:#999;} </td> 
 </tr> 
 </tbody> 
</table>

**设置伪类的顺序：a:link->a:visited->a:hover->a:active**

**列表样式**

1.**list-style-type      **2.**list-style-image      **3.**list-style-position           **4.**list-style**

<table style="width:487px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:123px;"> 值 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:162px;"> 说明 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:201px;"> 语法示例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:123px;"> none </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:162px;"> 无标记符号 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:201px;"> list-style-type:none; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:123px;"> disc </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:162px;"> 实心圆，默认类型 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:201px;"> list-style-type:disc; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:123px;"> circle </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:162px;"> 空心圆 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:201px;"> list-style-type:circle; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:123px;"> square </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:162px;"> 实心正方形 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:201px;"> list-style-type:square; </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:123px;"> decimal </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:162px;"> 数字 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:201px;"> list-style-type:decimal </td> 
 </tr> 
 </tbody> 
</table>

**list-style 示例：**

li {
    	list-style:none;
    }
    
    去除列表前面的小黑点

**网页背景**

**背景颜色：background-color（**背景颜色值：十六进制方法表示**）（****transparent****）（透明的）**

**背景图像：****background-image**

background-image:url(图片路径);

**背景重复方式**

**background-repeat****属性**

1.**repeat****：沿水平和垂直两个方向平铺**

2.**no-repeat****：不平铺，即只显示一次**

3.**repeat-x****：只沿水平方向平铺**

4.**repeat-y****：只沿垂直方向平铺**

![70 1][]

**背景定位：****background-position****属性**

<table style="width:410px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:139px;"> 值 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:268px;"> 含义 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:139px;"> Xpos&nbsp; Ypos </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:268px;"> 单位：px， Xpos表示水平位置，Ypos表示垂直位置 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:139px;"> X%&nbsp; Y% </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:268px;"> 使用百分比表示背景的位置 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:139px;"> X、Y方向关键词 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:268px;"> 水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom </td> 
 </tr> 
 </tbody> 
</table>

**背景属性：****background属性（****背景样式简写****）**

**示例：**

.title {
    	font-size:18px;
    	font-weight:bold;
    	color:#FFF;
    	text-indent:1em;
    	line-height:35px;
    	background:#C00（背景颜色） url(../image（背景图像）/arrow-down.gif) 205px（背景定位） 10px no-repeat;（背景不重复显示）
    }

**如何控制对****背景****图片的大小？**

**背景尺寸** **background-size**

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:109px;"> 属性值 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:591px;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:109px;"> auto </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:591px;"> 默认值，使用背景图片保持原样 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:109px;"> percentage </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:591px;"> 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:109px;"> cover </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:591px;"> 整个背景图片放大填充了整个元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:109px;"> contain </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:591px;"> 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 </td> 
 </tr> 
 </tbody> 
</table>

**CSS3****渐变**

**线性渐变：****颜色****沿着一条直线过渡：从左到右、从右到左、从上到下等**

**径向****渐变：****圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合**

**浏览器****兼容性**

<table style="width:423px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:87px;"> 属&nbsp; 性&nbsp; 名 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:62px;"> IE </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:71px;"> Firefox </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:75px;"> Chrome </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:66px;"> Opera </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:59px;"> Safari </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:87px;"> Gradient </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:62px;"> 10+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:71px;"> 19.0+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:75px;"> 26.0+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:66px;"> 12.1+ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:59px;"> 5.1+ </td> 
 </tr> 
 </tbody> 
</table>

**CSS3****渐变****兼容**

1.**IE****浏览器是****Trident****内核****，加****前缀：****-****ms****-**

2.**Chrome****浏览器是****Webkit****内核****，加****前缀：****-****webkit****-**

3.**Safari****浏览器是****Webkit****内核****，加****前缀：****-****webkit****-**

4.**Opera****浏览器是****Blink****内核****，加****前缀：****-****o-**

5.**Firefox****浏览器是****Mozilla****内核****，加****前缀：****-****moz****-**

**线性渐变-语法：**

linear-gradient ( position（渐变方向）,  color1（第一种颜色值）,  color2（第二种颜色）,…)

**兼容****Webkit****内核的浏览器**

-webkit-linear-gradient ( position,  color1,  color2,…)

![70 2][]

[70]: /images/20220514/39d63c1cf45946f6b814ea7268b16036.png
[70 1]: /images/20220514/0fccf3ae686f4dfab3537964d767fa79.png
[70 2]: /images/20220514/179a631cfd4f4db89e51194502fdd47f.png