• 《中国新石器时代》读书笔记

    一、导言

    龙山时代

    • 文字系统可能已经出现
    • 用红铜和青铜制作小工具和饰件
    • 筑造城墙，暴力和战争普遍流行
    • 墓葬形式显示出社会等级的存在
    • 区域文化分布范围扩大，相互间交往空前繁盛

    May 25, 2016
    in 考古学

  • CSS3 布局

    代码示例

    自适应宽度

    使用新的 CSS 关键字：min-content。即子元素中最大的一个不可分割元素的大小。

    • max-content类似于将元素设为display-inline得到的宽度
    • fit-content类似于将元素设为浮动得到的的宽度
    figure {
  margin: auto;
  width: min-content;
}

figure > img {
  max-width: inherit;
}

    May 15, 2016
    in CSS

  • CSS3 与用户体验

    代码示例

    鼠标

    禁用元素

    disabled元素应当在鼠标样式上有所体现。

    :disabled,
[disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
}

    隐藏鼠标

    必要时可设置鼠标为none隐藏。

    video {
  cursor: none;
}

    May 15, 2016
    in CSS

  • CSS3 文字

    代码示例

    文字

    自动添加连字符

    再也不需要text-align: justify了。

    前提是在单词可换行处添加­。

    <p>
  President Clinton's de&shy;ci&shy;sion on Apr.8
  to send Chin&shy;ese Premier Zhu Rong&shy;ji pack&shy;ing
  with&shy;out an agree&shy;ment on China's
  en&shy;try into the World Trade Or&shy;gani&shy;za&shy;tion
  seemed to be a mas&shy;sive mis&shy;cal&shy;cu&shy;la&shy;tion.
</p>
    p {
  hyphens: auto;
}

    强行换行

    使用 Unicode 提供的换行符：0x000A。

    dd::after {
  content: "\A";

  // 防止和其他空白字符互相吞噬
  white-space: pre;
}

    May 15, 2016
    in CSS

  • CSS3 视觉效果

    代码示例

    阴影

    单边阴影

    利用box-shadow的向内收缩特性。

    div {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.5);
}

    相邻两侧阴影

    收缩阴影的同时，加以位移。

    div {
  box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.5);
}

    May 14, 2016
    in CSS