实践0.5像素边框以及简单思考

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

linear-gradient

linear-gradient()是属于background-image中的一个函数，

其中包含 (方向，起始颜色，终止颜色) 等若干属性

html

    <div class="div"></div>

style

.div {
    width: 300px;
    height: 300px;
    margin: 50px auto;
}
.div{
    border-left: 1px solid transparent;
    border-image: linear-gradient(to left, transparent 50%, blue 50%)0 0 0 100%;
}

利用向左的渐变，以1像素做50%的渲染

其他方向同理

但是是存在兼容性要求的

并且通过虚化线的方式，仔细看会发现一点细微的差距，但重要的是理解就行

伪类 + sacleY(0.5)

像这种问题，一般不会直接去操作这个边框，而是旁敲侧击的寻找方法，比如利用伪类定位 + sacle也可以实现

.div {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
}
.div::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: blue;
    transform: scaleY(0.5);
}

像scale缩放这种，不一定在边框上，也可以对图形，文字等，进行缩放，比如12px的限制

boxshadow

.div {
    width: 200px;
    margin: 50px auto;
}
.div{
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 blue;
}

通过0.5px的偏移，让1px的边框能看似0.5像素

有没有发现思路基本是截断，缩放，偏移等，活像上课时底下同学想方设法摸鱼的样子

svg

.div {
    width: 200px;
    margin: 50px auto;
}
.div{
    height: 1px;
    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='blue' x='0' y='0' width='1' height='0.5'/></svg>");
}

思考

1. 虽然不同方法都可以实现，但如果更换平台，可能会出现兼容性问题，效果不理想的问题，那么在实践中可以以需求为准，来选择理想的方法达到目的

2. 并且凡事举一反三，例如scale可以来缩放其他地方，svg可以绘画图形，渐变可以实现更炫酷的颜色等，让学习不会那么死板枯燥