CSS新增属性----渐变、文本效果和字体

秒速五厘米 2022-12-04 07:32 301阅读 0赞

## CSS3渐变（Gradients） ##

通过CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡  
`渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的`  
CSS3 定义了两种类型的渐变：

**线性渐变（Linear Gradients）**\- **向下/向上/向左/向右/对角方向**  
**径向渐变（Radial Gradients）**\- **由它们的中心定义**

> 线性渐变相关属性：background-image

### 线性渐变 ###

**从上到下**  
语法：

实例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

**从左到右**  
实例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

**对角**  
实例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]

使用角度  
语法：

> 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]

background-image: linear-gradient(0deg, red, yellow); 
    background-image: linear-gradient(90deg, red, yellow); 
    background-image: linear-gradient(180deg, red, yellow); 
    background-image: linear-gradient(-90deg, red, yellow);

![在这里插入图片描述][20200906145551714.png_pic_center]  
![在这里插入图片描述][20200906145607304.png_pic_center]  
![在这里插入图片描述][20200906145629693.png_pic_center]  
![在这里插入图片描述][20200906150318961.png_pic_center]

使用多个颜色节点

使用透明度（transparent）

重复的线性渐变

### CSS3 径向渐变 ###

颜色节点均匀分布  
语法：

![在这里插入图片描述][20200906151527377.png_pic_center]

颜色节点不均匀分布

![在这里插入图片描述][20200906151719953.png_pic_center]

设置形状

> `shape 参数`定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

椭圆形 Ellipse（默认）：  
![在这里插入图片描述][20200906151916338.png_pic_center]

圆形 Circle：  
![在这里插入图片描述][202009061519537.png_pic_center]

不同尺寸大小关键字的使用  
`size 参数`定义了渐变的大小。它可以是以下四个值：

*  closest-side
 *  farthest-side
 *  closest-corner
 *  farthest-corner

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 
    background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
    background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
    background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);

closest-side：  
![在这里插入图片描述][2020090615232537.png_pic_center]

farthest-side：  
![在这里插入图片描述][20200906152343140.png_pic_center]

closest-corner：  
![在这里插入图片描述][20200906152407133.png_pic_center]

farthest-corner（默认）：  
![在这里插入图片描述][20200906152425580.png_pic_center]

重复的径向渐变  
`repeating-radial-gradient()`函数用于重复径向渐变：

## CSS3 文本效果 ##

CSS3中包含几个新的文本特征。

*  text-shadow ------适用于文本阴影

text-shadow: 5px 5px 5px #FF0000;

![在这里插入图片描述][20200906152925812.png_pic_center]

*  box-shadow ------适用于盒子阴影

> h-shadow v-shadow blur spread color insect  
> 水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影

实例：

background-color:yellow;
    box-shadow: 10px 10px 5px #888888;

![在这里插入图片描述][20200906153005490.png_pic_center]

*  text-overflow ------指定应向用户如何显示溢出内容  
    三件套：

white-space:nowrap
    overflow:hidden;
    text-overflow:ellipsis  //溢出的内容将以...代替
    text-overflow:clip //溢出的内容看不见

![在这里插入图片描述][20200906155640247.png_pic_center]

*  word-wrap ------自动换行属性允许强制文本换行

> `normal` 只在允许的断字点换行（浏览器保持默认处理）。  
> `break-word`在长单词或 URL 地址内部进行换行。

word-wrap:break-word;

![在这里插入图片描述][20200906155800302.png_pic_center]

*  word-break------换行属性指定换行规则

> `normal` 使用浏览器默认的换行规则。  
> `break-all` 允许在单词内换行。  
> `keep-all` 只能在半角空格或连字符处换行。

word-break:keep-all;
    word-break:break-all;

![在这里插入图片描述][20200906155843740.png_pic_center]

## CSS3字体 ##

1.  如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)

@font-face
    { 
        font-family: myFirstFont;
        src: url(...);		// ...为字体具体形式
    }
     
    div
    { 
        font-family:myFirstFont;
    }

1.  使用粗体文本必须添加另一个包含粗体文字的@font-face规则：

@font-face
    { 
        font-family: myFirstFont;
        src: url(...);  // ...为字体具体形式
        font-weight:bold;
    }

CSS3字体描述

<table> 
 <thead> 
  <tr> 
   <th>描述符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font-family</td> 
   <td>规定字体的名称。</td> 
  </tr> 
  <tr> 
   <td>font-stretch</td> 
   <td>定义如何拉伸字体。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>定义字体的样式。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>定义字体的粗细。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td>unicode-range</td> 
   <td>定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/46e3b8d5d7a547e8a717c99dcf0da652.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/392dd76ff3b241c88f11ce8eda06a1c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/999fc716ed2c494b859cc2671cd4cd45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/02ec13e0c92e46f699e9f08f14508a11.png
[20200906145551714.png_pic_center]: /images/20221123/9094d81590124fd8937a55df5b3e0d46.png
[20200906145607304.png_pic_center]: /images/20221123/35f00a7f842940588a93d16a7341973f.png
[20200906145629693.png_pic_center]: /images/20221123/2071d4561a56428bb758f4e9db3f8fa2.png
[20200906150318961.png_pic_center]: /images/20221123/fad2ffc2d9c7421c9b8ea9074e449e2a.png
[20200906151527377.png_pic_center]: /images/20221123/c195a0fafee94625a86685ab5a2ba465.png
[20200906151719953.png_pic_center]: /images/20221123/8b2560d4746441829f70678b9a187e1f.png
[20200906151916338.png_pic_center]: /images/20221123/cdb6b56d8ec74799bf88e993868aced2.png
[202009061519537.png_pic_center]: /images/20221123/ff41a5967e004e8a83b6dc999451dea2.png
[2020090615232537.png_pic_center]: /images/20221123/655108f90f2f43bc95d127ac198f7bf5.png
[20200906152343140.png_pic_center]: /images/20221123/6668d1082dd04c00b1347ab18754d263.png
[20200906152407133.png_pic_center]: /images/20221123/4d92f46abcc54689a7176ca35a6c0b7c.png
[20200906152425580.png_pic_center]: /images/20221123/1a209556ca9044309dd62157de4d24d9.png
[20200906152925812.png_pic_center]: /images/20221123/38616b4bcd8c4c788f8eea5928136ada.png
[20200906153005490.png_pic_center]: /images/20221123/8dadfefebf45414ebf9c5897c2e07a34.png
[20200906155640247.png_pic_center]: /images/20221123/98ca86320c8149e4b2be44fa1b96fa45.png
[20200906155800302.png_pic_center]: /images/20221123/1ef9fcf1de5e44b2a7cc987fce86d0ce.png
[20200906155843740.png_pic_center]: /images/20221123/908fdc17f5b2457da355a291974ffdeb.png