<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框0.5px实现方法</title>
<style type="text/css">
/*标准1px*/
.b1{
height: 10px;
border: 1px solid #ff0000;
}
/*1.利用渐变-百度糯米*/
.a1{
height: 1px;
margin-top: 20px;
background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
}
/*2.缩放-发虚-京东*/
.a2{
height: 1px;
margin-top: 20px;
background-color: #f00;
-webkit-transform: scaleY(.5);
transform:scaleY(.5);
}
/*4条边框都需要*/
.scale-half {
margin-top: 20px;
height: 100px;
border:1px solid #f00;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="a1"></div>
<div class="a2"></div>
<div class="scale-half"></div>
</body>
</html>边框0.5px实现方法
猜你喜欢
转载自blog.csdn.net/qq_29132907/article/details/79728096
今日推荐
周排行