text-shadow

  • text-shadow只有外阴影，没有内阴影
  • 参数
    • 参数1 x轴平移
    • 参数2 y轴平移
    • 参数3 阴影的模糊值
    • 参数4, 阴影颜色
  • text-shadow: 1px 1px 3px red;

  • image.png

    可以多个使用

  • text-shadow：1px 1px 3px red, 2px 3px 3px green;

    案例

  • 浮雕效果

  • image.png
  • text-shadow: 1px 1px #000, -1px -1px #fff;
  • 镂刻效果
  • image.png

  • text-shadow: -1px -1px #000, 1px 1px #fff;

    问题

  • 使用了text-shadow再使用background-clip：text 会发生问题

  • image.png 在lesson4 - text 25分

    -webkit-text-stroke文字描边

  • 参数

    • 参数1 描边粗细
    • 参数2 描边颜色
  • text-stroke: 1px red;

  • image.pngimage.png

    @font-face 引入字体包

  • 一定要写在标签外面，比如div{ @font-face:{} }写在div中是没有办法使用的

    使用

    1. @font-face {
    2. font-famliy:'abc' // 给引入的字体包起一个字体名称
    3. src: url() // 引入地址
    4. }

  • image.png

    white-space: pre

  • 保留标签输入格式，标签中输入多个空格就显示多个空格，标签中存在换行就有换行

    word-break

  • 参数

    • keep-all 强制不换行
    • break-word 保证英文单词能不换行就不换行image.png

      word-spacing 文字间隔

  • image.pngimage.png