CSS3(七) CSS3 颜色文字和字体

CSS3

发布日期: 2020-05-02

更新日期: 2020-05-24

文章字数: 1.1k

阅读时长: 5 分

阅读次数:

颜色模式

在 CSS3 里面新增加了rgba
r red 红色 0-255
g green 绿色 0-255
b blue 蓝色 0-255
a Alpha 透明 0-1

文字阴影

text-shadow:x y blur color,…..
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影要是加很多层,就会很卡
文字阴影应用
最简单的用法: text-shadow:2px 2px 4px black;
阴影叠加:text-shadow:2px 2px 4px red,2px 2px 4px green;他先渲染后面的在渲染前面的
几个好玩的例子:

   - 光晕: color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
   - 火焰文字: text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

文字描边

-webkit-text-stroke: 宽度颜色(只有谷歌内核可以，他里面接受 2 个参数;必须加前缀)

文本功能

direction 定义文字排列方式(全兼容)
rtl 从右向左排列
ltr 从左边向右排列
注意要配合 unicode-bidi:bidi-override;一起使用
text-overflow:定义省略文本的处理方式
clip 无省略号
ellipsis 省略号 (必须配合 white-space:nowrap 和 overflow:hidden 一起使用)
也就是说要是想超出部分变成省略号只有(2 个 overflow 和一个 white)

自定义文字

######这里必须要说明自定义文字指的是用户的电脑上面没有这种字体而你又想用。所以只有通过自定义来表达
第一步:找设计要字体
第二步:去转换字体格式生成兼容代码:http://www.fontsquirrel.com/fontface/generator
第三步:下载下来代码然后找到下面的代码。里面可能对照的不一样。不过能用了

@font-face {
  font-family: 'miaov';
  src: url('111-webfont.eot');
  src: url('111-webfont.eot?#iefix') format('embedded-opentype'), url('111-webfont.woff')
      format('woff'), url('111-webfont.ttf') format('truetype'), url('111-webfont.svg#untitledregular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

附上全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>CSS3文字透明和阴影</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    #p1 {
      font: 14px/28px '微软雅黑';
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      color: white;
    }
    #p2 {
      font: 14px/28px '微软雅黑';
      text-align: center;
      background: rgba(0, 0, 0, 1);
      color: rgba(255, 255, 255, 0.6);
    }
    #p3 {
      font: 14px/28px '微软雅黑';
      text-align: center;
      background: rgba(255, 0, 0, 1);
      color: rgba(255, 255, 255, 1);
      border: 50px solid rgba(0, 0, 0, 0.7);
      margin-top: 5px;
    }
    #p4 {
      font: 28px/40px '微软雅黑';
      text-align: center;
      text-shadow: 2px 2px 3px red;
    }
    #p5 {
      font: 28px/40px '微软雅黑';
      text-align: center;
      text-shadow: 2px 2px 3px red, 4px 4px 3px green;
    }
    #p6 {
      font: 100px/200px '微软雅黑';
      text-align: center;
      color: #fff;
      text-shadow: 2px 2px 4px #000;
    }
    #p7 {
      font: 28px/40px '微软雅黑';
      text-align: center;
      color: rgba(0, 0, 0, 1);
      text-shadow: 2px 2px 2px #000;
      transition: 2s;
    }
    #p7:hover {
      text-shadow: 2px 2px 30px #000;
      color: rgba(0, 0, 0, 0.1);
    }
    #p8 {
      font: 28px/40px '微软雅黑';
      text-align: center;
      -webkit-text-stroke: 1px red;
    } /*他就接受2个参数一个宽度一个颜色，并且只能谷歌使用，前面必须加前缀*/
    #p9 {
      width: 400px;
      border: 1px solid #ccc;
      direction: rtl;
      unicode-bidi: bidi-override;
    } /*direction :rtl表示从右向左排序，他必须配合的就是unicode*/
    #p10 {
      width: 100px;
      border: 1px solid #ccc;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    } /*这3个属性必须一起使用2个overflow还有一个white*/
  </style>
  <body>
    <p id="p1">背景透明,文字不透明</p>
    <p id="p2">背景不透明,文字透明</p>
    <p id="p3">背景不透明,边框透明</p>
    <p id="p4">文字阴影</p>
    <p id="p5">文字阴影叠加</p>
    <p id="p6">浮雕纹字</p>
    <p id="p7">文字模糊</p>
    <p id="p8">文字描边</p>
    <p id="p9">文本排列</p>
    <p id="p10">
      超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号
    </p>
  </body>
</html>