CSS 高级技巧

超出文本以 ... 的形式显示

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

提示：当以上三个属性和 display: flex 或display: grid 属性结合使用时无效。

background-clip 属性规定背景的绘制区域。

background-origin 属性规定 background-position 属性相对于什么位置来定位。

绘制一个正方形

width: 100%;
padding-top: 100%;

提示：当没有设置height属性是padding属性是根据元素的width计算。

绘制小三角

color: #000;
width: 0;
height: 0;
border-top: 10px solid;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;

提示：当 border 没有指定颜色就是字体的颜色