2021-11-13

标题1px边框的实现?

加粗样式方案一：

采用媒体查询的方式，如果在非高清屏，则设置边框为1px；如果是高清屏，且dpr是2，那么设置边框为0.5px；如果是高清屏，且dpr是3，那么设置边框为0.3333px

```css
.border {
    border: 1px solid #ccc;
}
@media screen and (-webkit-min-device-pixel-ratio:2) {
    .border {
        border: 0.5px solid #ccc
    }
}
@media screen and (-webkit-min-device-pixel-ratio:3) {
    .border {
        border: 0.3333px solid #ccc
    }
}
```

** 方案二：**

通过css3缩放实现

通过伪元素选择器创建一个伪元素，边框为1px，并且将尺寸设置为父元素的2倍。然后再通过transform:scale将元素缩小到50%

````css
.radius-border {
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio:2) {
    .radius-border:before {
        content: "";
        pointer-events:none; /*防止点击处触发*/
        box-sizing：border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border: 1px solid #ccc;
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}
@media screen and (-webkit-min-device-pixel-ratio:3) {
    .radius-border:before {
        content: "";
        pointer-events:none; /*防止点击处触发*/
        box-sizing：border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border: 1px solid #ccc;
        transform: scale(0.3);
        transform-origin: 0 0;
    }
}
````