<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
[class*=v-hairline] {
position: relative;
}
[class*=v-hairline]::after {
content: ' ';
position: absolute;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: scale(.5);
transform: scale(.5);
border: 0 solid #ebedf0
}
.v-hairline--top::after {
border-top-width: 1px;/*no*/
}
.v-hairline--right::after {
border-right-width: 1px;/*no*/
}
.v-hairline--bottom::after {
border-bottom-width: 1px;/*no*/
}
.v-hairline--left::after {
border-left-width: 1px;/*no*/
}
.v-hairline--surround::after {
border-width: 1px;/*no*/
}
</style>
</head>
<body>
<div style="width: 200px;height: 20px" class=" v-hairline--surround"></div>
</body>
</html>
其他
$bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
@media (-webkit-max-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
@media (-webkit-max-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
.border-1px
&::after
-webkit-transform: scaleY(.333333);
transform: scaleY(.333333);
border-1px($color)
position relative
&:after
display block
position absolute
left 0
bottom 0
width 100%
border-bottom 1px solid $color
content ''
