如何让CSS边框不影响内容区域

Question

我有一个网格项目（instagram按钮），它有instagram颜色渐变（使用css）作为背景，但它没有完全覆盖整个元素，因为我使用了

border-top

。

.instagram{
      border-top: 1px solid rgba(156, 156, 156, 0.486);
      background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   }

我试过了

background-attachment: fixed

。

和

outline

是不可能的，因为它会给出所有侧面的轮廓（只需要顶面）。有没有办法让渐变充满，同时保持

border-top

？或任何解决方法。谢谢！

Answer 1

为什么需要顶部边框？ 如果你需要顶部的分隔线比它可见，并且你需要在整个容器中渐变，那么只需将边框设置为 0 即可。