发表于 | 分类于

借助padding实现三道杠

1
<div class="tri-line"></div>
1
2
3
4
5
6
7
8
.tri-line{
	width:150px;
	height:30px;
	border-top:30px solid;
	boder-bottom:30px solid;
	background-color:currentColor;
	background-clip:content-box;
}

借助padding实现白眼效果

1
<div class="eye"></div>
1
2
3
4
5
6
7
8
9
.eye{
	width:150px;
	height:150px;
	padding:10px;
	border:10px solid;
	border-radius:50%;
	background-color:currentColor;
	background-clip:content-box;
}

参考:css padding与图形绘制–张鑫旭

发表于 | 分类于

结论

  1. 所有浏览器的input／textarea都有内置padding值。
  2. 所有浏览器的button按钮都有内置padding值。
  3. 部分浏览器select下拉有padding值，比如firefox。ie8+可以设置padding值。
  4. 所有浏览器的radio/checkbox没有padding值。
  5. button元素的padding很奇葩。。。
    阅读全文 »