实用技巧

Retina 屏下的 1px 线的实现

Retina 屏下的 1px 线的实现，适用于 dpr = 2 的情况：

1. 使用渐变实现，使用两种颜色填充 1px 宽内容
2. 使用缩放实现，对 1px 高度线条进行 0.5 倍缩放
3. base64 编码实现
4. base64 编码嵌入 SVG 实现

<div class="border_normal">正常使用 1px border 效果（本 DEMO 请在移动端环境下查看）</div>
<div class="border_gradient">1. 使用渐变实现，使用两种颜色填充 1px 宽内容 </div>
<div class="border_scale">2. 使用缩放实现，对 1px 高度线条进行 0.5 倍缩放</div>
<div class="border_base64">3. base64 编码实现</div>
<div class="border_svg">4. base64 编码嵌入 SVG 实现</div>

body {
    /* overflow: hidden; */
}

div {
    width: 100vw;
    height: 80px;
    margin: 30px auto;
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    padding-top: 20px;
    font-size: 16px;
    box-sizing: border-box;
}

/* border-top: 1px */
.border_normal,
.border_gradient,
.border_scale,
.border_boxshadow,
.border_base64,
.border_svg{
    border-top: 1px solid #999;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .border_gradient {
        background-image: linear-gradient(to top, transparent 50%, #999 50%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: top center;
        border-top: 0 none;
        padding-top: 1px;
    }

    .border_scale {
        position: relative;
        padding-top: 1px;
        border-top: 0 none;
    }
    .border_scale:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        border-top: 1px solid #999;
        transform: scale(0.5);
        transform-origin: 0 0;
        box-sizing: border-box;
    }
    .border_base64 {
        padding-top: 1px;
        border-top: 0 none;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);
        background-position: 0 0;
        background-repeat: repeat-x;
        background-size: 1px 1px;
    }

    .border_svg {
        border-top: 0 none;
        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#999' x='0' y='0.5' width='100%' height='0.5' /></svg>");
        background-position:0 0;
        background-repeat:no-repeat;
    }

}

效果展示：

滚动时增加头部阴影

利用冗余标签，::before 伪元素作为阴影，::after 伪元素作为遮挡，其中 ::before 阴影元素做 fixed 定位，::after 元素相对父元素定位，这样在 body 滚动时就能自然把 ::after 遮挡元素移开。效果如下：