绘制图形
绘制三角形 标示
div {
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: red;
}
同理可制作直角三角形
绘制 梯形
.div {
height: 0;
width: 50px;
border-bottom: 25px solid #66FFCC;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
绘制平行四边形
transform: skew(25deg)
绘制月牙
利用圆形图形的 box-shadow
更复杂图形
可用 canvas 或 svg 绘制
实用需求
单行文本隐藏
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
转化为可编辑
contentenditable="true"
只响应input
事件
在系列词汇间 增加 逗号等分割符
.item+.item:before {
content: ','
}
其他
边框的另两种实现方式
用 box-shadow 做边框
用 outline
简单的鼠标事件阻止
pointer-events: none
鼠标事件“穿透”该元素 并且 指定该元素“下面”的任何东西