您的位置：首页 > 其它

0.5px的实现

2015-09-10 11:01 399 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>.5px的实现</title>
<style type="text/css">
body{padding: 50px;-webkit-touch-callout:none;}
[class*="btn"]{margin: 0 auto;}
.btn{
width: 200px;
height: 42px;
line-height: 42px;
border-radius: 5px;
text-align: center;
background-color: #EDEDED;
}
.btn1 {
border: 1px solid red;
}
.btn2 {
position: relative;
}
.btn2:before {
content: '';
position: absolute;
border: 1px solid red;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
transform: scale(0.5);
border-radius: 10px;
}
</style>
</script>
</head>

<body>
<div class="btn btn1">1px border</div>
<br/><br/>
<div class="btn btn2">.5px border</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航