1.什么是渐变 两种或多种颜色平滑过渡的效果 1.线性渐变 按照一个直线的方式去填充渐变 2.径向渐变 按照半径的方向去填充渐变 3.重复渐变 2.渐变的组成(元素) 色标：决定了渐变的每种颜色及其出现的位置 每一种渐变效果都是由多个色标组成的(2个及以上) 3.渐变的语法 属性：background-image 取值： linear-gradient()：线性渐变 radial-gradient()：径向渐变 repeating-linear-gradient()：重复线性 repeating-radial-gradient()：重复径向
语法：background-image:linear-gradient(angle,color-point,color-point,color-point,…); angle：方向或角度，即渐变的填充方向 值： to top：从下向上填充 to right：从左向右填充 to bottom：从上向下填充 to left：从与右向左填充 角度： 0deg ~ 360deg 0deg：相当于to top 90deg：相当于to right 180deg：相当于to bottom 270deg：相当于to left color-point：色标，表示每个颜色值，即其出现的位置，多个色标之间用(，)分割 ex： 1.red 0% 取决于方向和角度，开始的时候是红色 2.blue 50px 填充到第50像素是，变为蓝色 3.色标的位置可以省略 省略位置后采用默认方式，每个将平均分配元素区域
ex： 代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #d1{ width:200px; height:200px; background-image:linear-gradient(45deg,red 0%,green 50%,pink 100%); //从左下角到右上角进行填充，起始颜色为红色，中间颜色为绿色，末尾颜色为粉色。 } </style> </head> <body> <div id="d1"></div> </body> </html>效果如下图：
语法：background-image：radial-gradient([size at position] 可以不写,color-point,color-point,…) size at position：当前径向渐变以及圆心位置 size：圆的半径，px为单位 position：圆心位置 ex： 1. 0px 0px 将圆心设置在元素的左上角 2. 50% 50% 将圆心设置在元素的中间位置处 3. right bottom 关键字：top/right/bottom/left/center 将圆心设置在元素的右下角
ex： 代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #d1{ width:400px; height:400px; border:1px solid transparent; //这里为了装饰，给d1加一个1px的边框颜色为透明色。 border-radius:50%; //作用同上，倒角为50%，把d1倒成一个圆形 box-shadow:0px 0px 15px yellow; //作用同上，加一个x轴偏移0px，y轴偏移0px，颜色为黄色，距离为15px的模糊距离。 background-image:radial-gradient(100px at 50% 50%, red,orange,skyblue); //圆心的半径为100px，把圆心设置在中心位置，渐变颜色为红色、橙色、天空蓝。 } </style> </head> <body> <div id="d1"></div> </body> </html>效果如下图：
各主流浏览器的主流版本均支持渐变效果，对于不支持渐变的浏览器，可以尝增加浏览器的前缀去实现渐变的显示。 浏览器前缀： Firefox：-moz- Chromehe Safari：-webkit- Opera:-o- 前缀的加载位置： 1.如果浏览器不支持属性的话，则将前缀加载到属性名称前 ex： animation：scroll 5s; -webkit-animation:scroll 5s; -moz-anmiation:scroll 5s; -o-animation:scroll 5s;
2.如果浏览器支持属性，但不支持值的话，则将前缀加载到属性值的前面 ex： background-image:linear-gradient(); background-image:-webkit-linear-gradient(); background-image:-moz-linear-gradient(); background-image:-o-linear-gradient();
1.指定字体系列 属性：font-family 取值：value1,value2,…,… 注意：字体取值包含中文或特殊符号，使用""引用起来 为什么允许给这么多值，是因为当给某个元素指定好字体的时候，他会从第一个值开始匹配，能匹配上谁就用谁，后面的就不管了 ex： font-family：“宋体”,“微软雅黑(microsoft yahei)”,Arial; 2.字体大小 属性：font-size 取值：px 或 pt 或 em ex： ; font-size:24px; 3.字体加粗 属性：font-weight 取值： 1.normal 正常体 2.bold 粗体 3.400~900(整百) 400：normal 900：bold Ps:normal太细bold太粗，正常体和粗体之间(可以自定义粗细) 4.字体样式 属性：font-style 取值： 1.normal 正常体 2.italic 斜体 5.小型大写字母 作用：针对英文字符，将小写字符变成大写字符，但是大小与小写一样 属性：font-variant 取值： 1.normal 正常 2.samll-caps 小型大写字母 6.字体属性 属性：font 取值：style variant weight size family 注意：使用简写属性时，必须设置family的值，否则无效 ex： font:12px; --无效 font:12px “microsoft yahei”; --通过 ex： 代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #d1{ font-family:"microsoft yahei",Arial; //设置d1中字体为微软雅黑和Arial。 font-weight:700; //d1中字体加粗为700。 font-style:italic; //d1中字体样式为斜体 font-variant:small-caps; //d1中字母设置为小型大写字母。 } #d1 span{ font-weight:normal; //设置d1中的span元素字体加粗为正常体。 } </style> </head> <body> <div id="d1"> 这是一段文本，里面包含<span>English</span>、中文、粗体、斜体！！！ <br> This is a text containing English、Chinese、 bold、 italic！！！ </div> </body> </html>效果如下图：
1.文本颜色 属性：color 取值：任意合法颜色 2.文本排列方式 作用：指定当前元素中的文本，行内元素，行内块元素的水平对齐方式(块级元素不受文本排列所控制) 属性：text-align 取值：left/center/right 3.文字修饰 作用：指定文本的线条样式 属性：text-decoration:value; 取值： 1.none 没有线条显示 2.underline 下划线 = 3.overline 上划线 4.line-through 删除线 = 4.行高 作用：指定元素中一行数据的高度。如果行高的高度高于文字高度本身，那么该行文本将在行高的范围内呈现处垂直居中的显示效果 (弊端：只能完成一行数据，多行会溢出) (可以改变两行文本之间行间距) 场合： 1.控制一行文本垂直居中对其 2.设置行间距 属性：line-height 取值：以px为单位的数值 5.首行文本缩进 属性：text-indent 取值：缩进的距离，以px为单位的数值 6.文本阴影 属性：text-shadow 取值：h-shadow v-shadow blur color; ex： 代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #d1{ font-family:"microsoft yahei"; //设置d1中字体为微软雅黑。 font-weight:700; //设置字体加粗为700. font-style:italic; //设置字体样式为斜体。 font-variant:small-caps; //设置英文字母为小型大写字母 color:orange; //设置颜色为橙色。 text-align:center; //文本格式为居中。 text-decoration:line-through; //在文本中加删除线 } #d1 span{ font-weight:normal; //设置d1中span中文本字体加粗为正常体。 } #d2{ width:300px; //设置d2的宽为300px。 padding:40px 0; //设置内边距上下40px，左右为0px。 text-shadow:5px -5px 5px red; //设置文本阴影右偏移5px，偏移5px，阴影为红色。 } </style> </head> <body> <div id="d1"> 这是一段文本，里面包含<span>English</span>、中文、粗体、斜体！！！ <br> This is a text containing English、Chinese、 bold、 italic！！！ </div> <div id="d2"> 这还是一段文本 </div> </body> </html>效果如下图：
