Question

我正在尝试创建一个以两种颜色为边框的按钮。我需要使用的两种颜色是蓝色：＃00a7e1，橙色：＃f6531d。

如果可能的话，我想只使用CSS。

提前谢谢！

Answer 1

只需将border-image与渐变一起使用：

button {
  padding:20px;
  border:5px solid;
  border-image:linear-gradient(60deg,#00a7e1 50%,#f6531d 0) 20;
  background:transparent;
}

<button>some text</button>

Answer 2

示例：

.btn
{
    border: 0;

    padding: 4px;
    display: inline-block;
    background: linear-gradient(20deg, #00a7e1 49%, #e65300 50%);
}
.bg
{
    background: #349645;
    padding: 8px 14px;
    font: bold 24px Consolas;
}
.btn:active .bg
{
    background: #0a1117;
    color: #ffffff;
}

<div class="btn"><div class="bg">YOU'R TITLE</div></div>
<button class="btn"><div class="bg">YOU'R TITLE</div></div>

Answer 3

您还可以玩gradient和background-clip （请参见CSS中的注释）

button {
  vertical-align: top;
  border: 5px solid transparent;/* give extra space for gradients colors */
  font-size: 2.5rem;
  margin: 0.25em;
  padding: 0.5em 2em;
  background: linear-gradient(#333, #333),/* black turned into gradient to hold with background-clip and hide the 2 color gradient under it */
    linear-gradient(/* 2 colors to draw under the borders also via background-clip*/
        to bottom left,
        rgb(230, 83, 0) 50%,
        gray 51%,
        rgb(0, 166, 224) 40%
      )
      no-repeat center center;
  background-clip: 
    padding-box, /* drawn inside including padding area */
    border-box;/* drawn also under borders */
  background-size:
  100% 100%, 
  110% 150%;/* must be bigger than 100% so it include also borders, else it repeats */
  color: white;
  box-shadow: 0 0 2px 2px black, inset 0 0 2px black;/* did you want this too ? */
}

<button>BUTTON</button> <button> TO</button> <button> PLAY</button>

如果您认为这太多了，那么您还有border-image。

以2种颜色为边框的按钮

3 个答案: