条纹边框，如示例图像 css

Posted 2023-05-08

【中文标题】条纹边框，如示例图像 css

【英文标题】：Stripes Border like sample image css

【发布时间】：2019-05-22 09:52:08

【问题描述】：

我想创建一个条纹边框。

我想使用img 标记或div 标记将图像包含在条纹边框的顶部。

这就是它需要的样子：

现在我正在尝试使用边框图像作为 svg。

.feed-item:after 
  background: #0055b9;
  background: url(../images/studentslab_hover_stripe_bg.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 4vw 2.7vw 2vw 2vw;
  width: 104%;
  opacity: 0;


.feed-item:hover:after 
  opacity: 1;
  z-index: -1;

但在响应性方面，有时它并没有完全覆盖，因为我的条纹背景图像具有尺寸高度和宽度。

所以我想像边框一样使用它。有什么办法吗？

【参考方案1】：

在伪元素上使用重复的线性渐变，然后将其绝对定位在父 div 后面。

继续hover。

div 
  width:150px;
  height: 200px;
  margin:1em auto;
  border:2px solid green;
   position: relative;
  background: white;


div:after 
  content:"";
  position: absolute;
  z-index:-1;
  top:0;
  left:0;
height:100%;
  width:100%;
   background: repeating-linear-gradient(
   -45deg, 
   transparent 0, 
   transparent 4px, 
   blue 4px, 
   blue 8px);
  transition:all .25s ease;
  


div:hover::after 
  left:8px;
  top:8px;

<div>Hover me</div>

【讨论】：

小记——使用 transform: translate(8px, 8px) 以获得更好的性能（无需重绘）

问题是 Z 顺序不起作用。我的背景被绘制在按钮的顶部，而不是在按钮后面。更改按钮和 :after 伪元素中的 z 顺序无效。

【参考方案2】：

您可以考虑如下所示的多重背景颜色：

.box 
  width: 100px;
  height: 200px;
  border-right:  10px solid transparent;
  border-bottom: 10px solid transparent;
  background: 
   linear-gradient(#fff,#fff) center/calc(100% - 2px) calc(100% - 2px) padding-box,
   linear-gradient(blue,blue) padding-box,
   linear-gradient(#fff,#fff) top right  /10px 10px border-box,
   linear-gradient(#fff,#fff) bottom left/10px 10px border-box,
   /* you can replace this gradient with your SVG*/
   repeating-linear-gradient( -45deg, 
     transparent 0, transparent 2px, 
     blue 2px, blue 4px) border-box;
   /**/
  background-repeat:no-repeat;
  display:inline-block;

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:200px;height:100px"></div>

【讨论】：

@LemonKazi 啊，所以你的 SVG incle 也是边框，我认为它只是条纹......我认为如果你可以只用条纹制作 SVG 会更好，因为我们可以用 CSS 做边框