文本

text-shadow

• x y blur color
• 多个 x y blur color 使用逗号分隔
• 浮雕效果右下黑色左上白色 text-shadow:1px 1px #000,-1px,-1px #fff;
• 一旦使用了-webkit-background-clip:text;文字就成了背景的一部分

div {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  transition: all 2s;
  text-shadow: 10px 10px 3px rgba(0, 0, 0, 0.1);
}

描边效果仅限于谷歌浏览器

• -webkit-text-stroke:描边的粗细 描边的颜色

  webkit-text-stroke:2px red;

div {
  font-family: simsun;
  /* 必须是这个字体 */
  -webkit-text-stroke: 1px red;
}
/* 如果没有simsun字体可以使用自定义字体 */
@font-face {
  /* 字体名字 */
  font-family: "abc";
  /* 字体包 */
  src: url();
}

字体格式

• truetype 微软 苹果 .ttf
• opentype 微软 abode .opt
• woff 是 truetype 和 opentype 的压缩版本.woff
• ie .eat
• .svg

MIME 协议 多途径的邮件扩展协议 format 对字体的一种解析器兼容老版本浏览器

. {
  /* 空白 */
  white-space: pre;

  /*  不换行*/
  word-break: keep-all;
  /* 到边界就换行-强制换行英文单词也不管 */
  word-break: break-all;
  /* 尽可能保持英文的完整性 */
  word-break: break-word;
  /* word-wrap, overflow-wrap是一样的  */
  /* word-wrap:break-word; 和  word-break:break-word;是一样的效果 */
  word-wrap: break-word;
}

. {
  text-align-last: start;
}

column-with 实现瀑布流

• 效果一般,使用上存在问题

div {
  column-count: 4;
  column-rule-style: solid;
}
img {
  width: 200px;
  height: 250px;
}

实现一屏一屏左右切换效果

<style>
  div {
    /* 固定宽度 */
    width: 300px;
    height: 500px;
    border: 1px solid red;
  }
  .content {
    column-width: 300px;
    column-gap: 20px;
    transition: all 2s;
  }
  div:hover .content {
    transform: translatex(-320px);
  }
</style>

<div class="wrapper">
  <div class="content">abc</div>
</div>