4.文本和颜色相关属性

4.1.RGBA

RGB是一种色彩标准,由红、绿、蓝的变化以及相互叠加得到各种各样的颜色,RGB又叫做三原色,RGBA是在RGB的基础上增加了透明度

.box {
  height: 300px;
  width: 300px;
  border: 10px dashed black;
  padding: 20px;
  background: rgba(255, 0, 0, 0.5);
}

4.2.渐变颜色

渐变通俗的说就是过渡,渐渐的变化,官方定义是可以让你在两个或者多个指定颜色之间显示平稳的过渡

渐变主要分为两种,线性渐变和径向渐变

线性渐变

.box {
  height: 300px;
  width: 300px;
  border: 10px dashed black;
  padding: 20px;
  /* background: linear-gradient(to left, red, green);
    */
   background: linear-gradient(100deg, red 70%, green);
}

径向渐变

.box {
  height: 300px;
  width: 300px;
  border: 10px dashed black;
  padding: 20px;
  /* background: linear-gradient(to left, red 70%, green); */
  /* background: linear-gradient(100deg, red 70%, green);
    */
  background: radial-gradient(red, green);
}

4.3.text-overflow与word-wrap

text-overflow规定了当文本溢出的时候发生的事情

.box {
  width: 200px;
  border: 1px dashed black;
  padding: 20px;
  white-space: nowrap;
  /* 当前,只在火狐管用 */
  /* text-overflow: '!'; */
  /* 显示省略号 */
  text-overflow: ellipsis;
  overflow: hidden;
}

4.4.text-shadow

给文本设置阴影

.box {
    width: 200px;
    border: 1px dashed black;
    padding: 20px;
    /* 四个值分别是:水平位置,垂直位置,模糊大小,阴影颜色 */
    text-shadow: 5px 10px 5px black;
  }

4.5.嵌入字体@font-face

参加iconfont网站代码,https://www.iconfont.cn/collections?personal=1