带有渐变边框和角落高亮的按钮

Question

我需要创建一个带有渐变边框和角落高亮的按钮。我尝试使用伪元素来实现，但只有2/4个边框边缘。提前感谢您！

.fly--btn {
  background: rgba(0, 0, 0, 0.5);
  color: #A9A9A9;
  margin-top: 12%;
  position: relative;
  border: none;
  padding: 5px 20px;
}

.fly--btn:before,
.fly--btn:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
}

.fly--btn:before {
  top: -1px;
  width: 1px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#101f2d), to(#3263a3));
  background-image: -webkit-linear-gradient(#101f2d, #3263a3);
  background-image: -o-linear-gradient(#101f2d, #3263a3);
  background-image: linear-gradient(#101f2d, #3263a3);
}

.fly--btn:after {
  right: -1px;
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, from(#3263a3), to(#101f2d));
  background-image: -webkit-linear-gradient(left, #3263a3, #101f2d);
  background-image: -o-linear-gradient(left, #3263a3, #101f2d);
  background-image: linear-gradient(left, #3263a3, #101f2d);
}

<button type="button" class="fly--btn">
     Начать путешествие
    </button>

- S.Stas

---

使用border-image属性可以为边框添加自定义图像，详情请参考：https://developer.mozilla.org/en-US/docs/Web/CSS/border-image - Gerard

Answer 1

这是一个带有渐变和多重背景的想法：

.box {
  display:inline-block;
  padding:10px;
  color:#fff;
  font-size:30px;
  background:
    linear-gradient(#fff,#fff) top right/10px 2px,
    linear-gradient(#fff,#fff) top right/2px 10px,
    linear-gradient(#fff,#fff) bottom left/10px 2px,
    linear-gradient(#fff,#fff) bottom left/2px 10px,
  
    linear-gradient(to right,transparent, #3263a3) top/100% 2px,
    linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
    linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
    linear-gradient(to top,transparent, #3263a3) right/2px 100%;
    
  background-repeat:no-repeat;
}

body {
  background:#222;
}

<div class="box"> some text here </div>

如果你想要一个角落的阴影，可以尝试使用伪元素和drop-shadow。如下所示：

.box {
  display:inline-block;
  padding:10px;
  color:#fff;
  font-size:30px;
  background:
    linear-gradient(to right,transparent, #3263a3) top/100% 2px,
    linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
    linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
    linear-gradient(to top,transparent, #3263a3) right/2px 100%;
    
  background-repeat:no-repeat;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid #fff;
  filter:drop-shadow(0 0 3px);
}
.box:before {
  top:0;
  right:0;
  border-left:none;
  border-bottom:none;
}
.box:after {
  bottom:0;
  left:0;
  border-right:none;
  border-top:none;
}


body {
  background:#222;
}

<div class="box"> some text here </div>

- Temani Afif