@mixin border ($direction, $color:#e6e6e6,$opacity:1) {
content: '';
position: absolute;
@if $direction == 'left' {
border-left: 1px solid $color;
top: 0;
left: 0;
height: 100%;
transform-origin: 0 0;
opacity: $opacity;
} @else if $direction == 'bottom' {
width: 100%;
border-bottom: 1px solid $color;
left: 0;
bottom: 0;
transform-origin: 0 bottom;
opacity: $opacity;
} @else if $direction == 'top' {
width: 100%;
border-bottom: 1px solid $color;
left: 0;
top: 0;
transform-origin: 0 bottom;
opacity: $opacity;
}@else if $direction == 'right' {
width: 100%;
border-right: 1px solid $color;
left: 0;
top: 0;
transform-origin: 0 0;
opacity: $opacity;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
@if $direction == 'left' {
height: 200%;
} @else {
width: 200%;
}
transform: scale(.5);
@if $direction == 'right' {
height: 200%;
} @else {
width: 200%;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
@if $direction == 'left' {
height: 300%;
} @else {
width: 300%;
}
@if $direction == 'right' {
height: 300%;
} @else {
width: 300%;
}
transform: scale(.33);
}
}
@mixin border-1px($color: #e6e6e6, $borderRadius: 100px) {
position: relative;
border-width: 0;
&:after {
content: ' ';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid $color;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: $borderRadius;
}
}
用法:
.a{
position: relative;
&::after{
@include border(bottom,#F2F2F2,0.3)
}
}