跳到主要内容

CSS揭秘阅读笔记

第一章 引言​

  • 尽量减少代码重复
  • 合理使用简写

第二章 背景与边框​

  • 半透明边框
    1、默认状态下，背景会延伸到边框的区域下层
    2、可以通过 background-clip 属性来调整上述默认行为所带来的不便；这个属性的初始值是 border-box， 意味着背景会被元素的 border box（边框的外沿框） 裁切掉。所以用background-clip：padding-box;裁切掉边内边距以外的背景可解决问题
  • 多重边框
    box-shadow
    outline方案
  • 背景定位
    background-position 的扩展语法方案
    background-origin 方案
    calc() 方案
    background-position: calc(100% - 20px) calc(100% - 10px);
  • 边框内圆角
    使用2个元素
    一个元素设置(书上的猜测貌似已经实现：未来规范将会明确地建议描边跟着圆角走)
  • 条纹背景
    linear-gradient(#fb3, #58a);
    background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
  • 复杂的背景图案
    网格
    波点
    棋盘
  • 伪随机背景
  • 连续的图片边框
    border-image
    使用2个元素——覆盖方法
    一个元素实现

第三章 形状​

  • 自适应椭圆
    border-radius （简写属性）
  • 平行四边形
    嵌套元素方案
    伪元素方案
  • 菱形图片
    基于变形的方案
    裁切路径方案
  • 切角效果 CSS渐变
    内联SVG与border-image方案
    裁切路径方案
    corner-shape

    这个属性需要跟 border-radius 配合使用，从而产生各种不同形状的切角效果，而切角的尺寸正是 border-radius 的值

  • 梯形标签页
    3D旋转
  • 简单的饼图
    基于transform的解决方案
    SVG解决方案

第四章 视觉效果​

  • 单侧投影
    解决方案来自 box-shadow 鲜为人知的第四个长度参数。
  • 不规则投影
    滤镜效果规范
  • 染色效果
    基于滤镜的方案
    基于混合模式的方案
    毛玻璃效果
    折角效果

第五章 字体排印​

  • 连字符断行
    hyphens

  • 插入换行
    br
    有一个 Unicode 字符是专门代表换行符的：0x000A 。

  • 文本行的斑马纹
    在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸

  • 调整tab的宽度
    tab-size

  • 连字
    font-variant-ligatures

  • 华丽的&符号
    font-family

  • 自定义下划线

  • 现实中的文字效果
    凸版印刷效果
    空心字效果
    文字外发光效果

    1.text-shadows
    2.filter

    文字凸起效果
    环形文字

    内联 SVG 来方案

第六章 用户体验​

  • 选用合适的鼠标光标
    cursor
  • 扩大可点击区域
  • 自定义复选框
    新的伪类 :checked
    开关式按钮
  • 通过阴影来弱化背景
    伪元素方案
    box-shadow 方案
    backdrop 方案
  • 通过模糊来弱化背景
    滤镜遮罩来实现
  • 滚动提示
  • 交互式的图片对比控件
    CSS resize 方案
    范围输入控件方案

第七章 结构与布局​

  • 自适应内部元素
    width 和 height 属性定义新的关键字， min-content 。这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）
  • 精确控制表格列宽
    table-layout
  • 根据兄弟元素的数量来设置样式
    对于只有一个列表项的特殊场景来说，解决方案显然就是 :only-child，这个伪类选择符就是为这种情况而设计的。
    根据兄弟元素的数量范围来匹配元素
    :nth-child() 选择符在这方面非常好用
  • 满幅的背景，定宽的内容
    一个CSS解决方案
  • 垂直居中
    对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto。 基于绝对定位的解决方案
    早期的垂直居中，它要求元素具有固定的宽度和高度 p186
    基于视口单位的解决方案
    基于 Flexbox 的解决方案
  • 紧贴底部的页脚
    固定高度的解决方案
    更灵活的解决方案:Flexbox

第八章 过渡与动画​

  • 缓动效果
    弹跳动画
    弹性过渡

  • 逐帧动画
    steps() 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。

  • 闪烁效果
    animation-direction

  • 打字动画
    CSS表现

  • 状态平滑的动画
    图片从左到右滚动

  • 沿环形路径平移的动画
    需要两个元素的解决方案