【CSS】你不知道的 CSS
zh-rocco opened this issue · comments
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 +
参考
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"
参考
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 +