0.5像素边框的实现
设计稿中的1像素在网页中实际是2像素,要实现1像素的边框需要制作0.5像素的boder,下面举例纯css利用伪类制作0.5像素边框:
.box{ width:300px; line-height:150px; position:relative; background-color:#f1f1f1; text-align:center; } .box:after { content: " "; position: absolute; left: 0; width: 100%; height: 1px; color: #d9d9d9; bottom: 0; border-bottom: 1px solid #fff; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(.5); transform: scaleY(.5); }
还有一种写法:
.box:before{ content: ''; position: absolute; width: 200%; height: 200%; border-bottom: 1px solid red;/* 直接改变border的位置即可 */ -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); box-sizing: border-box; }