0.5像素线条：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>0.5像素线条</title> <style type="text/css"> .xt { position: relative; height: 50px; line-height: 50px; background-color: #CCC } .xt:after { position: absolute; content: ''; width: 100%; left: 0; bottom: 0; height: 1px; background-color: red; -webkit-transform: scale(1,.5); transform: scale(1,.5); -webkit-transform-origin: center bottom; transform-origin: center bottom } </style> </head> <body> <div class="xt">0.5像素线条</div> </body> </html>
0.5像素边框：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>0.5像素边框</title> <style type="text/css"> body{padding: 50px;-webkit-touch-callout:none;} [class*="btn"]{margin: 0 auto;} .btn { position: relative; width: 200px; height: 42px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #EDEDED; } .btn:before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-style: solid; border-width: 1px; border-color: red; } </style> </script> </head> <body> <div class="btn">0.5像素边框</div> </body> </html>
0.5像素圆角边框：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>0.5像素圆角边框</title> <style type="text/css"> body{padding: 50px;-webkit-touch-callout:none;} [class*="btn"]{margin: 0 auto;} .btn { position: relative; width: 200px; height: 42px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #EDEDED; } .btn:before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-style: solid; border-width: 1px; border-color: red; -webkit-border-radius: 10px; border-radius: 10px; } </style> </script> </head> <body> <div class="btn">0.5像素圆角边框</div> </body> </html>
--任何组织或个人分享、转载本博客内容，请务必以链接方式注明出处：来自博客园--下雨天的太阳（http://www.cnblogs.com/doomjx/）--
--请勿以任何形式修改内容（包括文字和图片）--