在帶圓角的 div 邊框上使用漸變

Question

我有一些具有圓角和彩色邊框的 div。 我希望 div 的邊框具有漸變，以便當用戶將鼠標懸停在 div 上時它會發生變化。

我已經找到了所有關於如何使用漸變的網站（ http://css-tricks.com/css3-gradients/、http://gradients.glrzad.com/等），但我還是想不通了解如何使它適用於圓形邊緣邊界。

有人可以指導我訪問一個描述如何執行此操作甚至幫助我編寫代碼的網站嗎？

Answer 1

您可以嵌套兩個元素並讓外部div作為漸變邊框，然后您可以解決此問題，例如：

<div class="container">
  <div class="content">
    ...
  </div>
</div> 

然后在你的 CSS 中：

/* 
   unprefixed for conciseness, use a gradient generator por production code 
*/

.container { 
   background: linear-gradient(red, black);
 }

.content   { 
   background: white; 
   padding: 10px;
 }

有關工作示例，請查看https://stackoverflow.com/a/7066176/524555

Answer 2

在我看來，使用 :before 元素是最理想的解決方案，因為您可以通過 CSS 完全控制並且 HTML 標記保持干凈。

.circle {
  width: 300px;
  height: 200px;
  background: white;
  border-radius: 100%;
  position: relative;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.circle::before {
  border-radius: 100%;
  width: 100%;
  height:100%;
  content: '';
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  padding: 10px;
  top: -10px;
  left: -10px;
  position:absolute;
  z-index:-1;
}

您可以調整填充以及頂部和左側的值來調整邊框粗細。

這是一個顯示實際示例的 JSFiddle： http : //jsfiddle.net/wschwarz/e2ckdp2v/

Answer 3

這是一個簡單的解決方案：

結果：帶有漸變邊框的 CSS 圓角

.yourClass {
  display: inline-flex;
  border: double 6px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
} 

Answer 4

我知道這個答案已經被回答並被接受，但我想發布一種我使用的不同方法，因為如果按鈕位於具有另一個漸變或圖像的背景上，這個被接受的答案將不起作用。

我的解決方案僅適用於水平漸變和圓角（但不是圓形）按鈕。 我同時使用了“border-image”屬性和偽元素來實現這個效果：

該按鈕將只有頂部和底部的“邊框圖像”邊框。 左右邊框將使用偽元素完成。

這是一個工作示例：

HTML：

<div class="background">
  <button class="button">
    My button!
  </button>
</div>

CSS：

*, *:before, *:after {
    box-sizing: border-box;
}

.background {
  background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
  width:500px;
  height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.button {
    box-sizing:border-box;
    display: inline-block;
    padding:0.5em 0;
    background:none;
    border:none;
    border-top:2px solid #0498f8;
    border-bottom:2px solid #0498f8;
    border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
    border-image-slice: 1;
    position: relative;
    text-transform: lowercase;
    transition:background 0.3s;
    color: #fff;
    cursor: pointer;
    font-size:1em;
    &:before,
    &:after {
        content: '';
        display: block;
        width: 2em;
        height: calc(100% + 4px);
        border-radius: 3em 0 0 3em;
        border: 2px solid #0498f8;
        position: absolute;
        border-right: none;
        transition:background 0.3s;
        left: -2em;
        top: -2px;
    }
    &:after {
        border-radius: 0 3em 3em 0;
        border: 2px solid #4db848;
        position: absolute;
        border-left: none;
        left:auto;
        right: -2em;
        top: -2px;
    }
    &:hover {
        background:rgba(0,0,0,0.3);
        &:after,
        &:before {
            background:rgba(0,0,0,0.3);
        }
    }
}

https://jsfiddle.net/fnbq92sc/2/

Answer 5

border="solid 1px transparent"
background="linear-gradient(Canvas, Canvas) padding-box, linear-gradient(red, blue) border-box"
borderRadius="1rem"

背景的第二部分是你想要的漸變^