第一種
.b-b?{
??position:?relative;
}
.b-b:after?{
??content:?"?";
??position:?absolute;
??left:?0;
??bottom:?0;
??right:?0;
??/*height:?1px;*/
??border-top:?1px?solid?#d9d9d9;
??color:?#d9d9d9;
??-webkit-transform-origin:?0?0;
??transform-origin:?0?0;
??-webkit-transform:?scaleY(0.5);
??transform:?scaleY(0.5);
}
node-sass 和sass-loader(vue)
第二種
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-device-aspect-ratio: 1.5) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.7); //1.5 * 0.7接近1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-device-aspect-ratio: 2) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.5); //2 * 0.5 = 1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 2.5),
(min-device-aspect-ratio: 2.5) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.4); //2.5 * 0.4 = 1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 3),
(min-device-aspect-ratio: 3) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.333); //3 * 0.333接近 1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 3.5),
(min-device-aspect-ratio: 3.5) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.2857); //3.5 * 0.2857接近 1
? ? }
? }
}
封裝
@mixin border($height, $color) {? ? //封裝成的border? height指的是大小，到時(shí)候需要定位 加z-index；不然會(huì)被遮住?
? position: relative;
? &::after {
? ? position: absolute;
? ? display: block;
? ? left: 0;
? ? bottom: 0;
? ? width: 100%;
? ? height: .78rem;
? ? border: $height solid $color;
? ? content: '';
? ? border-radius: .06rem;
? }
}
@mixin border-bottom($height, $color) {? //封裝成的border-bottom
? position: relative;
? &::after {
? ? position: absolute;
? ? display: block;
? ? left: 0;
? ? bottom: 0;
? ? width: 100%;
? ? border-top: $height solid $color;
? ? content: '';
? }
}
@mixin border-top($height, $color) { // 封裝成的border-top
? position: relative;
? &::after {
? ? position: absolute;
? ? display: block;
? ? left: 0;
? ? top: 0;
? ? width: 100%;
? ? border-top: $height solid $color;
? ? content: '';
? }
}
調(diào)用
@include border(1px, #d7d7d7);
第三種
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-device-aspect-ratio: 1.5) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.7); //1.5 * 0.7接近1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-device-aspect-ratio: 2) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.5); //2 * 0.5 = 1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 2.5),
(min-device-aspect-ratio: 2.5) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.4); //2.5 * 0.4 = 1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 3),
(min-device-aspect-ratio: 3) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.333); //3 * 0.333接近 1
? ? }
? }
}
@media (-webkit-min-device-pixel-ratio: 3.5),
(min-device-aspect-ratio: 3.5) {
? .border-1px {
? ? &::after {
? ? ? transform: scaleY(0.2857); //3.5 * 0.2857接近 1
? ? }
? }
}
直接寫border 就可以了
