离开页脚

Question

user3178479

Asked:2020-03-11 02:54:28 +0000 UTC2020-03-11 02:54:28 +0000 UTC 2020-03-11 02:54:28 +0000 UTC

具有非均匀背景的块内的渐变边框

772

为块绘制这样的边框的选项和方法是什么？

此边框位于具有背景图像（非均匀背景）的块内。距离边缘 15 像素。内部透明。边界被打破。

.box {
  position: relative;
  margin-bottom: 20px;
  padding: 15px;
}

.box-inner {
  width: 100%;
  height: 100%;
    background-clip: padding-box; 
  border: solid 2px transparent;
}

.box:after {
  content: '';
  position: absolute;
  top: 15px;
  left:15px;
  right: 15px;
  bottom: 15px;
  background: linear-gradient(to right, red, orange);
}

.box-1 {
  width: 200px;
  height: 200px;
  background: url(https://picsum.photos/200/300);
}

.box-2 {
  width: 200px;
  height: 500px;
  background: url(https://picsum.photos/200/300);
}

<div class="box box-1">
  <div class="box-inner"></div>
</div>
  
  <div class="box box-2">
  <div class="box-inner"></div>
</div>

background-clip: padding-box; 不起作用。

2 个回答

Voted

UModeL · Answer 1 · 2020-03-11T11:39:31Z

呃……如果我<img>保留伪元素，那么代码会更短。直到那时：

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  background: 
    linear-gradient(90deg, #6de0f5, #d8a960, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 0 100%/1px 100% no-repeat;
}

<div class="img-inner-border"><img src="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></div>

要将帧中断放置在另一侧，您需要更改渐变的大小、位置和方向（斜率）：

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  
  /*                наклон       цвета градиента      позиция  размеры   повтор  */
  /*                   |        /       |       \      X   Y    X   Y      |     */
  /* linear-gradient(90deg, #6de0f5, #d8a960, #6de0f5) 0 100%/100% 1px no-repeat */
  
  /* Разрыв вверху
  background: 
    linear-gradient(90deg, #6de0f5, #d8a960, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 0 100%/1px 100% no-repeat; */
    
  /* Разрыв слева */
  background: 
    linear-gradient(0deg, #6de0f5, #d8a960, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 0 100%/100% 1px no-repeat;
    
  /* Разрыв справа
  background: 
    linear-gradient(0deg, #6de0f5, #d8a960, #6de0f5) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 0 100%/100% 1px no-repeat; */
}

<div class="img-inner-border"><img src="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></div>

尝试比较不同边的梯度参数，依次取消注释/注释掉属性，background一切都会变得清晰。

对于一些中断，除了位置和大小之外，您需要自己调整渐变：

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  
  /* Разрывы со всех сторон (уголки) */
  background: 
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/1px 100% no-repeat;
    
  /* Разрывы на углах
  background: 
    linear-gradient(0deg, transparent 10px, #6de0f5 10px, #d8a960, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 10px, #6de0f5 10px, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, transparent 10px, #6de0f5 10px, #d8a960, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 10px, #6de0f5 10px, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 0 100%/100% 1px no-repeat; */
    
  /* Разрывы-змейки
  background: 
    linear-gradient(0deg, #d8a960, #6de0f5) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, transparent 95%) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #d8a960) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 5%, #6de0f5) 0 100%/100% 1px no-repeat; */
}

<div class="img-inner-border"><img src="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></div>

如果您另外使用径向渐变，您可以进一步使设计多样化：

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  
  /* "Марка" */
  background: 
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/1px 100% no-repeat,
    
    radial-gradient(circle closest-corner at 50% 0%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px)),
    radial-gradient(circle closest-corner at 100% 50%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px)),
    radial-gradient(circle closest-corner at 50% 100%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px)),
    radial-gradient(circle closest-corner at 0% 50%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px));
    
  /* "Багет"
  background: 
    linear-gradient(0deg, transparent 20px, #6de0f5 20px, #d8a960, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 20px, #6de0f5 20px, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, transparent 20px, #6de0f5 20px, #d8a960, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 20px, #6de0f5 20px, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 0 100%/100% 1px no-repeat,
    
    radial-gradient(circle at 0% 0%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px),
    radial-gradient(circle at 100% 0%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px),
    radial-gradient(circle at 100% 100%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px),
    radial-gradient(circle at 0% 100%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px); */
}

<div class="img-inner-border"><img src="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></div>

Sevastopol' · Answer 2 · 2020-03-11T03:51:26Z

举个例子：

body:before,
body:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  bottom: 0;
}

body:before {
  left: 0;
  background-color: white;
}

body:after {
  right: 0;
  background-color: wheat;
}

.img {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 330px;
  height: 230px;
}

.img img {
  width: 330px;
  height: 230px;
}

.box {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 300px;
  height: 200px;
  border: 1px solid;
  border-image-slice: 5;
  border-image-source: linear-gradient(90deg, blue 20%, gold 55%);
  border-bottom: none;
}

.box__bottom {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.box__bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.box__bottom:before,
.box__bottom:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 50%;
}

.box__bottom:before {
  left: 0;
  margin-left: -60px;
  border: 1px solid;
  border-image-slice: 5;
  border-image-source: linear-gradient(90deg, blue 45%, gold 95%);
  border-top: none;
}

.box__bottom:after {
  right: 0;
  margin-right: -60px;
  border: 1px solid;
  border-image-slice: 5;
  border-image-source: linear-gradient(-90deg, gold 25%, blue 95%);
  border-top: none;
}

.bottom {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 25px;
}

<div class="img"><img src="https://bookmp3.ru/upload/thumb/zapovednik-sergeya-dovlatova-.jpg">
  <div class="box">
    <div class="box__bottom">
      <div class="bottom"></div>
    </div>
  </div>
</div>

具有非均匀背景的块内的渐变边框

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

具有非均匀背景的块内的渐变边框

2 个回答

相关问题