小编Dre*_*ieb的帖子

这是我在 CSS 中创建的按钮的一个孤立示例。它具有带渐变的 1px 边框和背景渐变。背景渐变作为伪元素实现，以允许其不透明度在悬停时淡化。

https://codepen.io/anon/pen/wbYoeo?editors=1100

.Button
{
  width: 200px;
  height: 30px;
  cursor: pointer;
    padding: 0.8rem;
    border-style: solid;
    border-image: linear-gradient(
        to right,
        green 0%,
        blue 100%);
    border-image-slice: 1;
    border-width: 1px;
    position: relative;
  margin-top: 10px;
    transition: color 0.2s;
}

.Button::before
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(
        to right,
        green 0%,
        blue 100%);
    opacity: 0.5;
    transition: opacity 0.2s;
}

该按钮在不同 DPI 的显示器之间呈现不同。使用不同 DPI 比例在 Windows 上的 Chrome 中呈现的按钮的屏幕截图：

100% DPI 缩放显示器，无间隙正确渲染。

150% DPI …