1、-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..."
2、all: unset 如果该元素的属性的值是可继承的,重置为父元素的继承的值,反之则改变为初始值
3、clip-path / shape-outside clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏
4、object-fit / object-position
object-fit 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
图片一定能要设置为宽高 100%,即不能超过父容器,才可以设置 object-fit,否则没意义
<div class="box">
<img src="../logo.png" class="img"/>
</div>
<style>
.box {
width: 100px;
height: 100px;
}
.img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
object-position 属性来指定被替换元素的内容对象在元素框内的对齐方式。
5、max-content / min-content / fill-available / fit-content
这几个值都可用在 width, height, min-width, min-height, max-width 和 max-height 属性上。
display 必须为 inline-block 或者 block,否则上面的值不起作用
6、锥形渐变 conic-gradient()
background: conic-gradient(red, orange, black, green, blue);