CSS3-多背景，多阴影，文本处理及字体图标、渐变的使用

一、多背景、多阴影

1. 背景

   在一个盒子中可以放多张背景图；
   background:背景属性1,背景属性2,..;
   背景属性：可以写我们学过的所有的背景属性，即可以是完整的背景属性。
   background:url() no-repeat center,#f2f2f2 url() no-repeat right bottom;

2. 盒阴影

   在一个盒子中也允许有多个阴影。逗号隔开一套属性。
   div{
      box-shadow:属性1,属性2;
   }
   属性1：可以最多写6个属性，也可以只写2个。

二、文字阴影

作用：给文字添加阴影效果。

text-shadow:x y blur color;//最多4个属性
            方向 模糊程度  阴影颜色
跟盒阴影一样的，只是要少2个属性。
最少写2个，最多写4个。
1. text-shadow:1px 2px;//最简单的写法， x,y可以是负数，也可是0;

文字的多阴影：

text-shadow:x y [blur color],x y [blur color] ,x y [blur color];

三、文字换行效果

1. 强制让文字换行–对中文无效-对很长的单词或数字在一行放不下怎么处理的问题

   /*超出则自动换行，可能保留原有单词的完整性，可能会有留白*/
   word-wrap:break-word;//溢出强行换行  --用得多写
   word-wrap:normal;//溢出也不会换行，默认的方式
   -----第二个属性-----
   /*该属性也是让文字换行，直接折断文字，只要文字溢出就折行，*/
   word-break:break-all; /*让文字换行*/

2. 强制让中文文字不换行

   white-space:nowrap|normal;
           不换行| 正常的，该换行自动换
   
   ----小技巧---让文字在一行显示超过父级后自动变省略号---！！！！-最有用
   .cutFont{
      overflow: hidden;
      text-overflow: ellipsis; /*文本溢出用省略号代替*/
      white-space: nowrap;/*强行不换行*/
   }
   //注意：需要给标签添加一个宽度

四、图标字体-自定义字体（以后经常用的）

小小图标不需要切图，能够像文字那样处理，即拥有文字一样的css属性。

不能用输入法打出来，需要制作出来，推荐的字体图标素材网站：https://www.iconfont.cn/

如何自定义字体教程步骤：

1. 打开www.iconfont.cn开始找图标素材

2. 搜索你要定制或要查找的图标字体，并加入购物车

3. 在购物车中将这些图标添加到指定的项目，方便后期管理：增删改查

4. 下载该项目–下载之前看看是不是选中的是font-class

5. 在项目中使用字体图标

6. 根据使用说明书使用

   1. 将font字体中的6个文件：1个iconfont.css和5个字体后缀提取到项目中
   2. 在项目HTML中导入该样式文件
   3. 添加一个空标签，比如span使用对应的字体
     
   4. 可以通过添加额外的样式修改字体图标的文字大小和文字颜色等（将其当做普通文字看待）

7. 如果要在原有的图标中新增或删除字体，需要再次回到网站中，将字体添加到购物车，到对应的项目，再下载再使用（即重复以上步骤）

五、CSS3的渐变

canvas学过渐变，现在CSS3再学一次。

可以代替背景图或者制作个性化的按钮。渐变就是一种特殊的颜色。

1. 线性渐变

   background: linear-gradient(direction, color-stop1, color-stop2,...);
   direction：默认不写从上到下
       to right   从左到右
       to bottom right 从左上角到右下角
   color-stop1:色标+位置，位置可以不写
   
   //比如：
   background: linear-gradient( red, green);
   background: linear-gradient(to right, red, green);
   background: linear-gradient(to right, red 30%, green 70%);
   

2. 径向渐变：必须至少定义两种颜色结点

   background: radial-gradient(center, shape, start-color size, ..., last-color size);
   参数说明：
       center：默认从中心开始渐变，其他值：top，bottom
       shape渐变的形状：默认是椭圆  circle/ellipse
       start-color 色标
       size渐变的大小：默认颜色均匀分布  不要写方向了
           farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
           closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
           closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
           farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
   实例：
       background: radial-gradient(red, yellow);

相关单词

1. transparent 透明

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号