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

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

我已經找到了關於如何使用漸變（http://css-tricks.com/css3-gradients/,http://gradients.glrzad.com/等）的所有網站，但我仍然無法弄清楚如何讓它適用於圓邊邊框。

有人請引導我到一個網站，描述如何做到這一點，甚至幫助我的代碼？

2013-07-09 Casey

如果你正在尋找一個跨瀏覽器的解決方案，這一點，我想建議使用嵌套的div在此答案中詳細說明：http://stackoverflow.com/a/7066176/524555 – Duopixel

@Duopixel太棒了。這將做到！我不相信我錯過了這個問題。我搜索了一個小時！如果你把你的答案作爲答案，那麼我會這樣檢查。 – Casey

CSS漸變和CSS border-radius應該很好地一起工作。對於現代瀏覽器，您不應該對您描述的內容有任何問題。如果您在使用IE9時遇到問題，則可以使用'filter'風格的已知錯誤，它不適用於'border-radius'。這可以使用[CSS3Pie]（http://css3pie.com/）解決。 – Spudley

可以嵌套兩個元素，讓外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

來源

2013-07-10 15:12:26 Duopixel

在我看來，使用a：before元素是最理想的解決方案，因爲您通過CS完全控制S和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，顯示了practival例如：http://jsfiddle.net/wschwarz/e2ckdp2v/

來源

2014-11-25 11:34:27

我知道這個答案已經回答和接受，但我想後我用了不同的方法，因爲這種接受的答案不會，如果工作例如，按鈕位於另一個漸變或圖像的背景上。

我的解決方案只適用於水平漸變和圓角（但不是圓形）按鈕。我使用「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/

來源

2017-12-14 12:28:13

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

回答

相關問題