码迷,mamicode.com
首页 > 其他好文 > 详细

0.5px的实现

时间:2015-09-10 12:49:23      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<!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>

 

0.5px的实现

标签:

原文地址:http://www.cnblogs.com/jiujiaoyangkang/p/4797147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!