【CSS】你不知道的 CSS

[zh-rocco]

1. 绝对定位时 top: 0; bottom: 0; left: 0; right: 0; 遇到 width 和 height

对于 absolute，如果该元素的宽高为 auto，同时设置 left 和 right，top 和 bottom 都生效，所围成的区域就是该元素的大小。如果已经设置了宽或高，同时设置 left 和 right，或 top 和 bottom 时，会只取 left 和 top 的值。fixed 定位也是这样的。

2. filter: drop-shadow()

.drop-shadow {
  filter: drop-shadow(30px 10px 4px #4444dd);
}

类似于 box-shadow 属性。 box-shadow 属性在元素的整个框后面创建一个矩形阴影，而 drop-shadow() 过滤器函数创建一个符合图像本身形状（alpha 通道）的阴影。（MDN）

兼容性： IE 不支持。（Can I use）

3. 实用的关键字 currentColor

指代 当前的文字颜色

.text {
  color: blue;
  border: 1px dashed currentColor;
}

兼容性： IE9 +

参考

• currentColor 关键字
• currentColor-CSS3 超高校级好用 CSS 变量

4. text-overflow: ellipsis

文本超出隐藏

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
}

注意

text-overflow 只对 "block container elements" 有效 ( block, inline-block ); flex 不是 "block container elements"

参考

• text-overflow - MDN
• text-overflow: ellipsis and flex - stackoverflow

5. CSS 计数器

counter-reset counter-increment counter()

.list {
  counter-reset: i; // reset counter
}
.list > li {
  counter-increment: i; // counter ID
}
.list li:after {
  content: '[' counter(i) ']'; // print the result
}

See the Pen [CSS] - counter by Rocco (@no-nothing) on CodePen.

兼容性： IE8 +

参考

• counter-reset
• counter-increment

CSS 参考资料

• CSS Functions