【CSS】css3渐变、文本格式化_04

目录

一.CSS3概述

二.CSS的语法规范

三.基础选择器

四.尺寸和边框

五.盒子模型 

六.背景设置

七.渐变

1.线性渐变，以直线的方式平缓填充渐变色

2.径向渐变，以圆的方式平缓填充渐变色 

3.重复渐变，重复执行径向渐变或者线性渐变

4.低版本浏览器的兼容问题

❣️ 开发css代码的步骤

八.文本格式化

1.字体属性

2.文本属性

(1) 字体颜色

(2) 文本的水平对齐方式

(3) 设置元素内部文本，行内，行内块的垂直对齐方式 

(4) 文本线条修饰

(5) 文本的阴影

---

🆙【前文回顾】👉  盒子模型、内边距、背景设置_03

---

一.CSS3概述

二.CSS的语法规范

三.基础选择器

四.尺寸和边框

五.盒子模型 

六.背景设置

七.渐变

渐变是指多种颜色，平缓变化的一个效果

色标：颜色+颜色出现的位置

一个渐变最少两个色标

渐变的分类

1.线性渐变，以直线的方式平缓填充渐变色

2.径向渐变，以圆的方式平缓填充渐变色

3.重复渐变，重复执行径向渐变或者线性渐变

1.线性渐变，以直线的方式平缓填充渐变色

background-image:linear-gradient(方向/渐变角度,色标1,色标2.......);

方       向      to top/to right/to bottom/to left  写终点
                       ↑         ↑           ↑            ↑

渐变角度       0deg/90deg/180deg/270deg

色       标     1.  颜色  %

                   2.  颜色  px

                   3.  颜色 不写位置，所有颜色平均分配

注：要注意渐变是 background-image 而不是 background-color! 所有的渐变，都是通过 background-image 进行设置

扩展：linear-gradient()

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 */

linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */

linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green  40%, red);   ——0deg相当于to top

⏬ 线性渐变的角度增强
         

补：渐变角度
渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加“left”“right”“top”和“bottom”等关键词。在使用角度设定渐变起点的时候，0deg对应“to top”， 90deg对应“to right”，180deg对应“to bottom”，270deg对应“to left”，整个过程就是以 bottom为起点顺时针旋转

补：其他渐变方向
从右下角向左上角线性渐变 “to top left” 实现从右下角向左角线性渐变。
从左下角到右上角线性渐变 “to top right” 关键词实现左下角到右上角的线性渐变。
从右上角到左下角线性渐变 “to bottom left” 关键词实现了右上角向左下角直线渐变。从左上角向右下角线性渐变 “to bottom right” 关键词实现了左上角向右下角直线渐变

补：渐变色工具
给大家推荐一个渐变色工具：https://c.runoob.com/more/gradients/#Anwar

2.径向渐变，以圆的方式平缓填充渐变色 

background-image: radial-gradient(半径  at圆心x  圆心y,色标1，色标2.......）

半径：以px为单位的数字

圆心：1. 以px为单位的数字

           2.%

           3.x:left/center/right  y:top/center/bottom

色标：1.  颜色  %,是半径的百分比   (颜色的位置使用百分比是半径的百分比大小)

           2.  颜色  px,不与半径关联了

           3.  颜色 不写位置，所有颜色平均分配

扩展：径向渐变(放射性渐变) radial-gradient 背景颜色渐变功能

该属性一共有三个属性值，分别为：形状（可选）、起始色（必选）、末尾色（必选）

eg.background-image{background-image:radial-gradient(orange,green);}

➡️ 第一个属性值（形状）shape（确定圆的类型:）:是可选的，一共有下面两种选择：

① circle 圆形

② ellipse 椭圆形，默认值

➡️ 第一个属性值还可以设置，发散的半径size（定义渐变的大小）(可选的)，关键字值如下所示：

closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角

// 除了关键字以外，还可以使用像素px，但是不能使用百分比。(半径是值所以要用px)
注意：半径跟关键字只能2选一，且只有shape为circle时才能使用px单位的半径值

eg.div{background-image:radial-gradient(circle 50px,orange,green);}

PS：size为可选值，省略时，则默认为“farthest-corner”，由此可见，省略size值时，此时shape类型是椭圆类型，因为px跟关键字不能同时存在。

➡️ 第一个属性值还可以设置，发散的位置position（定义渐变的位置），值如下所示：

at center（默认），at top,at left,at right,at bottom,at top left……

径向渐变完整的书写如下所示：⏬

1、如果设置shape为circle或是省略，则可以写半径px(不能使用百分比)或是关键字值如farthest-corner
注意：如果省略at 圆心x 圆心y，则默认为at center center
background-image: radial-gradient(circle 200px at center top ,#ffa500 15%,#008000 18%
 

2、如果设置shape为ellipse，则不能写半径px只能写关键字值如closest-corner
注意：如果省略at 圆心x 圆心y，则默认为at center center
background-image: radial-gradient(ellipse farthest-corner at left center,#ffa500 20%,#008000 18%

释义：
radial-gradient(  [  <ending-shape>  ||  <size>  ]  [  at  <position>  ], <color-stop-list>  );

参数分析如下：

<position>:
确定渐变的中心，可以省略，但如果省略此参数，则默认为居中。

<ending-shape>:
可以设置circle（圆形）或 ellipse（椭圆形）两个值； 确定渐变的结束形状分别是圆形还是椭圆形，可以省略。

<size>:
确定渐变的结束形状的大小。如果省略，则默认为“farthest-corner”。它可以明确地通过关键字给出。出于关键字定义的目的，请将渐变框边缘视为在两个方向上无限延伸，而不是有限线段。

如果结束形状是椭圆形，则其轴与水平轴和垂直轴对齐。

当定义为圆和椭圆的渐变时接受以下关键字作为其参数值：

closest-side：该结束形状的尺寸使得它恰好符合的侧渐变框最接近渐变的中心。如果形状是椭圆形，则它恰好与每个尺寸中最近的一侧相交。
farthest-side：与closest-side相同，除了最终形状的大小基于最远的一侧。
closest-corner：该结束形状的尺寸使得它穿过的角落渐变框最接近渐变的中心。如果形状是椭圆形，则给出的结束形状具有与指定最近侧时相同的纵横比。
farthest-corner：与closest-corner相同，除了最终形状的大小基于最远的角。如果形状是椭圆形，则结束形状的宽高比与指定最远侧时的宽高比相同。

注意：
如果被指定为“circle”或被省略，则<size>可以明确地给出：

<length>：明确给出圆的半径，负值无效。
百分比在这里是不被允许的；它们只能用于指定椭圆渐变的大小，而不是圆形渐变的大小。

 

🔳 径向渐变色函数代码示例：

/* 起始渐变色,结束渐变色 -- 其他所有值默认*/
 background-image: radial-gradient( #ff0,#009);

 /* 起始渐变色 起始渐变位置(可以设置像素值百分比),结束渐变色 结束渐变位置*/

 background-image: radial-gradient(#ff0 20px, #009 90px);

 /* 扩散形状为圆形(默认椭圆ellipse), 起始渐变色 起始渐变位置, 结束渐变色 结束渐变位置 */
 background-image: radial-gradient(circle,#ff0 20px, #009 70px);

 /* 扩散形状圆形 at 圆心位置在左上角(可以设置像素值百分比), 起始渐变色 起始渐变位置, 结束渐变色 结算渐变位置 */
 background-image: radial-gradient(circle at top left,#ff0 0px, #009 230px);

 /* 扩散形状圆形 半径大小(到最近的边) at 圆心位置在50px*² , 起始渐变色 起始渐变位置, 结束渐变色 结算渐变位置 */
background-image: radial-gradient(circle closest-side at 50px 50px,#ff0 20px, #009 70px);

/* 半径大小共有四个值分别是： */
closest-side：半径距离从圆心到最近的边的距离
closest-corner：半径距离从圆心到最近的角的距离
farthest-side：半径距离从圆心到最远的边的距离
farthest-corner：半径距离从圆心到最远的角的距离

小结：CSS radial-gradient() 函数

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

◼️ shape   确定圆的类型:
① ellipse (默认): 指定椭圆形的径向渐变。
②circle ：指定圆形的径向渐变

渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。确定渐变的结束形状分别是圆形还是椭圆形，可以省略。

◼️ size 定义渐变的大小, 可能值：

渐变的大小，即渐变到哪里停止。确定渐变的结束形状的大小。如果省略，则默认为“farthest-corner”
①arthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

• closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
• closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角

④farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

◼️ position定义渐变的位置,可能的值。可以是百分比、长度、关键字
① 横坐标
left：设置左边为径向渐变圆心的横坐标值。
right：设置右边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值。

② 纵坐标
center（默认）：设置中间为径向渐变圆心的纵坐标值。
确定渐变的中心即渐变起点的位置，可以省略，但如果省略此参数，则默认为居中。可以为百分比%，也可以是长度值，默认是图形的正中心。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

◼️ start-color, ..., last-color      用于指定渐变的起止颜色 

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>130-径向渐变</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        margin: 200px auto;
        /*
          线性渐变: 默认从上至下
          径向渐变: 默认从中心点向四周扩散
        */
        /* background: radial-gradient(red, green);*/

        /*
          线性渐变: 可以通过to 关键字的方式修改渐变的方向
          径向渐变: 可以通过at 关键字的方式修改开始渐变的位置
        */
        /*background: radial-gradient(at top left ,red, green);*/

        /*
          线性渐变: 可以通过to deg的方式修改渐变的方向
          径向渐变: 可以通过at 位置 位置的方式修改开始渐变的位置
        */
        /*background: radial-gradient(at 0px 100px ,red, green);*/
        /*
          线性渐变可以指定纯色和渐变的范围
          径向渐变也可以指定扩散的范围
        */
        /*background: radial-gradient(100px, red, green);*/

        /*
          注意点:
          如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面
        */
        /*ackground: radial-gradient(200px at 200px 100px ,red, green);/*位置at 200px 100px，范围100px*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

3.重复渐变，重复执行径向渐变或者线性渐变

(1) 重复线性

background-image: repeating-linear-gradient(方向,色标......);

(2) 重复径向

background-image: repeating-radial-gradient(半径  at圆心x  圆心y  色标......);

4.低版本浏览器的兼容问题

需要每种内核都写一遍，那么不同浏览器在执行代码，

只会执行自己对应内核的代码，其它3行代码屏蔽

-moz-         firefox

-webkit-     chrome/safari

-o-             opera

-ms-           IE

如果使用兼容性的写法，编写线性渐变

方向必须写起点，不加to

background: -moz-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

background: -o-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

background: -ms-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);

❣️ 开发css代码的步骤

1.找元素，先外后内，先左后右，先上后下 2.写样式的步骤 ①尺寸，大体位置 ②边框和背景 ③文本相关 ④微调

八.文本格式化

1.字体属性

(1) 设置字号大小
font-size: px/em/rem/pt

(2) 设置字体系列
font-family: 字体1,字体2,字体3......   ——推荐，如果字体中有空格，建议使用双引号

(3) 字体加粗
font-weight:
取值：1.关键字  lighter   normal  bold   bolder     更细字符  标准字符  粗体字符  更粗字符

                           300        400      600     700

           2.不带单位的数字，必须是100的整倍数，最大值为1000

(4) 字体样式
font-style:normal/italic 

(5) 小型大写字母
font-variant: small-caps;

(6) 简写方式，必须按照顺序写
font:style  variant  weight  size  family;

最简方式 font：size family；两个值必须都写

扩展：font-weight
font-weight 字体浓淡(粗细)属性，该CSS属性用来设定字体的浓淡程度。

取值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
 

如果值为 bolder 或者 lighter，则是相对其父对象来说的。

如果父对象的值为 normal，子对象值设为 bolder，则最终以 bold，即粗体显示。

字体浓淡属性是根据用户电脑上安装的字体相应匹配改变的。在很多情况下，由于系统作了最相近的匹配，因此看不出不同的 font-weight 值有什么区别。

可用值     值的说明

normal     缺省值。字体正常显示。

bold         粗体

bolder      比粗体更加粗

lighter      比正常字体淡

100         至少和200一样淡

200         至少和100一样粗，至少和300一样淡

300         至少和200一样粗，至少和400一样淡

400         字体正常显示，相当于normal。

500         至少和400一样粗，至少和600一样淡

600         至少和500一样粗，至少和700一样淡

700         粗体，相当于bold。

800         至少和700一样粗，至少和800一样淡

900         至少和800一样粗
 

在不同浏览器也有一定的差别，经试验：

在火狐浏览器中，font-weight的不同值的效果会有些差别；

在谷歌浏览器中,100~500是一样粗细，与normal一样；600~900一样，与bold一样；lighter与inherit与normal看起来一样；

在ie9浏览器中，跟谷歌浏览器差不多。

👉 更多详情：你真的了解font-weight吗?https://blog.csdn.net/sunyctf/article/details/127230541

2.文本属性

(1) 字体颜色

color:颜色值

(2) 文本的水平对齐方式

text-align:left/center/right/justify(两端对齐)

◼️ margin:0  auto和text-align:center的详细区分

margin:0  auto;     让块级元素水平居中，设置给块级元素，让块级元素本身水平居中

text-align:center;  设置在块级元素上，让内部的文本，行内元素，行内块水平居中
                             不会让内部的块级元素水平居中

当然，行内元素设置为块display:block，再使用margin:0  auto，可水平居中

(3) 设置元素内部文本，行内，行内块的垂直对齐方式 

——只有行高这一种方式

行高的特性：如果行高大于字号大小，文本会默认在行高范围的垂直居中显示

① line-height：length  px/em/rem为带单位的数字（即使用具体长度值作为行高值），一般会填写容器的高度，让文本在容器中垂直居中。——设置固定的行间距。
例如：line-height:1.5em，line-height:1.5rem，line-height:20px，line-height:20pt。
 
PS：若不带单位的数字，行高是字号倍数，即👉③

要让文本在容器内垂直居中，行高可以写容器的高度，或是写字号的倍数（要看容器高度是字号的多少倍，如果是2倍，则行高写2即可）

注意，不建议给多行文本设置行高，不然溢出的文本每一行行高也会根据设置判定

② line-height: normal   默认属性值，跟着用户的浏览器走，且与元素字体关联。——设置合理的行间距。

③ line-height: number   设置不带单位的数字，行高是字号倍数，此数字会与当前的字体尺寸相乘来设置行间距。——不带单位的数字：行高是字号倍数

④ line-height: %   使用百分比作为行高值。 ——基于当前字体尺寸的百分比行间距。
例如：line-height:150%，相对于设置了该line-height属性的元素的font-size大小计算。假设文字大小font-size为20px，则行高值为20px*150%=30px

height和 line-height搭配使用可以让文本垂直居中，但是这两个属性的值要一样才能实现垂直居中的效果

(4) 文本线条修饰

text-decoration:

① underline;  下划线

② overline;  上划线

③ line-through;  删除线

④ none;  去掉所有线条  ——应用场景：a标签去除下划线

(5) 文本的阴影

text-shadow:h-shadow   v-shadow   blur   color;

h-shadow  水平偏移量

v-shadow  垂直偏移量

blur           模糊程度

color         阴影颜色

 扩展：CSS样式：line-height、height与font-size的联系

行高=行间距+字体大小=上半行距+字体大小+下半行距
 

​

如图所示，line-height = font-size + 上下半行距。上下半行距总是相等。font-size居于中间。
当font-size值固定时，line-height越大，半行距越大。所以当line-height=height时，能实现文字垂直居中。同理，当line-height < height，时。上下半行距变短，故文字底线以下留白部分比顶线高；当line-height > height，上下半行距变高，顶线以上的留白比底线高。
 

◼️ font-size和line-height的关系   ——行高与字号的比较主要关系到行间距大小的问题

HTML结构：

<div>美丽的中国<br/>
    中国很美丽
</div>

（1）当font-size等于line-height时，即行间距为0；

div{ text-align:center;background:pink;font-size:30px;line-height:30px;}  

​

（2）当font-size大于line-height时，即行间距为负值，文字会杂糅在一起。

div{ text-align:center;background:pink;font-size:50px;line-height:30px;}  

效果如图所示：字体变大，元素高度不变。

​

（3）当font-size小于line-height时，行间距大于0，上下文字之间有间距。

div{ text-align:center;background:pink;font-size:15px;line-height:30px;}  

​
也就是说，当font-size等于line-height时，行距 = line-height - font-size = 0，此时，能实现文字垂直居中；而当font-size大于line-height时，则会出现行距为负值，则两行重叠。所以一般情况下，行高不允许使用负值

◼️ line-height和height的关系 ——行高与容器高的比较主要关系到文本在垂直方向上的位置问题
 

<div class="demo">测试</div>

（1）当height=line-height时：

.demo{text-align:center;background:red;font-size:18px;width:300px;height:100px;line-height:100px; }

效果如图：

​

（2）当height<line-height时：

.demo{text-align:center;background:red;font-size:18px;width:300px;height:70px;line-height:100px; }

效果如图：

​

（3）当height>line-height时：

.demo{text-align:center;background:red;font-size:18px;width:300px;height:140px;line-height:100px; }

效果如图所示：

​

总结：在给定元素高度时，高度等于行高，文字会垂直居中。当行高值减小时，字体会向上运动。当行高值增大时，字体会向下运动。另外，行高尽量不要大于元素高。如果行高大于元素高，多个相同的结构下很容易出现错位  

---

 🆕【后文传送门】👉 表格、定位_普通流定位与浮动定位、其他css常用属性_05

---