如何实现.5px的线条和.5px的圆角边框

实现.5px的线条

网络上有很多方法，如设置viewport，box-shawdow，border-image，background-image，transform:scale等，这里不做介绍(百度或者谷歌“retina 1px 边框”有答案)，本文只介绍一种觉得比较好用的方法，一来兼容性好，二来不依赖图片。

transform:scale(x,y)

通过css支持定义border或者height为.5px大的线条，在android设备中的无法显示出来，这里有个小技巧，果设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。

<!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>点5测试 - scale</title>

<style type="text/css">

.line {

    height: 50px;

    line-height: 50px;

    background-color: #CCC;

    border-bottom:1px solid red

} 

.scale {

    position: relative;

    height: 50px;

    line-height: 50px;

    background-color: #CCC

}

.scale: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="line">1px</div>

<br/><br/>

<div class="scale">0.5px</div>

</body>

</html>

http://peunzhang.github.io/demo/d5px/height-scale.html

实现.5px的圆角边框

.5px的边框，看起来看神奇，这里感谢蓝叔提供的方法。

原理：先定义1px的圆角边框，然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变)，然后再使用transform:scale(0.5)缩放为原来的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>点5测试 - border-radius</title>

<style type="text/css">

body{padding: 50px;-webkit-touch-callout:none;}

[class*="btn"]{margin: 0 auto;}

.btn-1 {

    width: 200px;

    height: 42px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    text-align: center;

    line-height: 42px;

    background-color: #EDEDED;

    border: 1px solid red;

}

.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-1">1px border</div>

<br/><br/>

<div class="btn">.5px border</div>

</body>

</html>

http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html

如果你在chrome打开，会发现缩放线条会导致边框颜色变浅，但大家可以放心使用，因为在大部分移动设备(相对高端)的颜色还是正常的。

巴特西

如何实现.5px的线条和.5px的圆角边框

实现.5px的线条

实现.5px的圆角边框

最新文章

热门文章