网站建设一条,可以做课后作业的网站,app游戏制作教程,品牌运营推广方案一、transform:scale
使用伪类 :after 或者 :before 创建 1px 的边框#xff0c;然后通过 media 适配不同的设备像素比#xff0c;然后调整缩放比例#xff0c;从而实现一像素边框 首先用伪类创建边框
.border-bottom{position: relative;border-top: none !important;
}.…一、transform:scale
使用伪类 :after 或者 :before 创建 1px 的边框然后通过 media 适配不同的设备像素比然后调整缩放比例从而实现一像素边框 首先用伪类创建边框
.border-bottom{position: relative;border-top: none !important;
}.border-bottom::after {content: ;position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background-color: #e4e4e4;-webkit-transform-origin: left bottom;transform-origin: left bottom;
}
然后通过媒体查询来适配
/* 2倍屏 */
media only screen and (-webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
}/* 3倍屏 */
media only screen and (-webkit-min-device-pixel-ratio: 3.0) {.border-bottom::after {-webkit-transform: scaleY(0.33);transform: scaleY(0.33);}
}
这种办法的边框并不是真正的 border而是高度或者宽度为 1px 的块状模型所以这种办法不能做出圆角一般都用来画分割线
