keng42

Appearance

On this page

之前看 CSS Secret 做的一些笔记，各种奇技淫巧🙈

引言 ​

规范从最初启动到最终成熟经过6个阶段 ​

  1. 编辑草案 ED
  2. 首个公开工作草案 FPWD
  3. 工作草案 WD：浏览器早期实现，经常修改
  4. 候选推荐规范 CR：相对稳定适合实现和测试
  5. 提名推荐规范 PR：修改的最后机会，一般很少修改
  6. 正式推荐规范 REC

CSS 编码技巧 ​

  1. 尽量减少代码重复

    尽量使用相对值而不是绝对值，比如 em, rem, line-height 使用比例， currentColor, inherit...

  2. 相信你的眼睛而不是数字

    人的眼睛并不是完美的输入设备，有时候精准的尺寸看起来并不是你想要的效果。比如同样尺寸的圆和正方形，圆看起来会小一些。

  3. 使用真正的响应式设计

    避免使用 media query 而应该从设计和相对值入手。比如使用 vw, vh, vmin, vmax, max-width, flex, 百分比...

  4. 合理使用简写

    在没有歧义的情况下尽量使用简写，有时候为了 DRY 也会展开来写。

  5. 预处理器

    CSS 和 ES6 越来越强大的情况下还有必要么。。。

背景与边框 ​

半透明边框 ​

默认情况下背景会延伸到边框所在区域的下层，background-clip 默认值是 border-box 修改为 padding-box 让浏览器把背景从内边缘切掉。

css
{
  border: 10px solid rgba(0, 0, 0, .5);
  background: white;
  background-clip: padding-box;
}

多重边框 ​

使用 box-shadow 一层一层叠加上去。

css
{
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}

如果只需要2重的话也可以使用 outline 实现。

css
{
  background: yellowgreen;
  border: 10px solid #655;
  outline: 5px solid deeppink;
}

灵活的背景定位 ​

可以使用 background-position 的扩展语法，即 top 等关键字后加偏移量。background-origin 用于改变 background-position 使用需要的边界——每个元素都有3个矩形边界。

css
{
  background: url(code-pirate.svg) no-repeat #58a;
  background-position: right 20px bottom 10px;
  /* background-position: calc(100% - 20px) calc(100% - 10px); */
}

形状 ​

自适应椭圆 ​

可以单独指定水平半径和垂直半径，可以接受百分比。

因为 border-radius 是对元素的 border box 进行圆角处理的。

css
{
  border-radius: 50% / 40%;
}

平行四边形按钮 ​

可以利用伪元素生成一个变形的背景

css
.button::before {
  content: '';
  background: yellowgreen;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transform: skewX(-45deg);
  z-index: -1;
}

其他 ​

伪元素 ​

:first-line 用于设置首行字体样式

:first-letter 用于设置首字母样式

:before 和 :later 用于在元素前后插入内容

定位 ​

static 默认值。正常流，忽略 top, bottom, left, right 或者 z-index 声明。

relative 正常流的相对偏移位置。

absolute 相对于第一个非 static 定位的父元素进行定位。

fixed 相对于浏览器窗口进行定位。