有沒有一種方法來創建帶有漸變且具有圓角的邊框的按鈕（或div）？

Question

它應該是這樣的：

到目前為止的嘗試：

1. 使用漸變背景加上一個內部元素來覆蓋它，只留下一個外部“邊界”。 背景顯然不是透明的 。

 body { background: #242424; height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; color: #FFFFFF; } div { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100vh; } h1 { margin: 2em; text-align: center; } a { cursor: pointer; transition: ease-in-out,.2s,color; } a:hover { color: #DDD; } .nested { display: block; max-width: 20em; padding: 2px; overflow: hidden; border-radius: 2em; background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%); } .nested span { display: inline-block; padding: 1em; text-align: center; background: #242424; border-radius: 2rem; } .nested span p { padding: 0 2em; margin: 0; } .pseudo { display: block; margin-top: 20px; position: relative; border-radius: 2em; padding: 1em 2em; background: #242424; } .pseudo:after { position: absolute; z-index: -1; top: -2px; bottom: -2px; right: -2px; left: -2px; background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%); border-radius: 2em; content: ''; } 

 <div> <h1>Gradient + Border Radius</h1> <a class="nested"><span><p>ANOTHER ONE</p></span></a> <a class="pseudo">AND ANOTHER ONE</a> </div> 

2. 使用border-image 。 角未圓化 。

 body { background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/ignasi_pattern_s.png); height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } a { padding: 20px 40px; border-image: linear-gradient(to bottom right, #00aeef 0%, #7cc578 100%); border-image-slice: 1; border-radius: 10px; } div { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100vh; } h1 { margin: 2em; text-align: center; } a { text-decoration: none; font-weight: bold; color: black; cursor: pointer; transition: ease-in-out,.2s,color; } a:hover { color: #DDD; } 

 <div> <h1>Gradient + [non working] Border Radius</h1> <a href="#">CLICK ME </a> </div> 

Answer 1

不，您不能在具有border-radius的元素上使用border-image ，因為根據規范 ，僅基於邊界半徑裁剪元素的背景，而不會根據border-image裁剪。 因此，圖像將始終是矩形（或正方形）。

如果需要透明的中央部分（或透明的內容區域），那么最好的選擇是使用SVG。 SVG的筆觸甚至可以將漸變作為值，因此它可以產生圓形的形狀，其邊框為漸變，中心部分為透明。

用於創建形狀的path很簡單，您可以在此處閱讀有關路徑命令的更多信息。

 .border-with-grad { position: relative; height: 100px; width: 250px; color: white; line-height: 100px; text-align: center; letter-spacing: 1.5px; } .border-with-grad svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .border-with-grad path { fill: transparent; stroke: url(#border-gradient); stroke-width: 4; } /* Just for demo */ body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); min-height: 100vh; font-family: sans-serif; } 

 <div class='border-with-grad'> <svg viewBox='0 0 250 100'> <defs> <linearGradient id='border-gradient' gradientUnits='objectBoundingBox' gradientTransform='rotate(5 0.5 0.5)'> <stop offset='0%' stop-color='rgb(248,244,135)' /> <stop offset='25%' stop-color='rgb(248,244,135)' /> <stop offset='75%' stop-color='rgb(53,176,182)' /> <stop offset='100%' stop-color='rgb(53,176,182)' /> </linearGradient> </defs> <path d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' /> </svg> CLICK HERE </div> 

---

使用CSS，我們可以使用mask-image使中間部分透明，但其瀏覽器支持非常差。 目前，只有基於Webkit的瀏覽器支持此屬性。 另一種方法是利用clip-path但是如果您需要支持IE和Firefox（Firefox僅支持SVG剪貼路徑），那就不行了。

Answer 2

如果需要完全的瀏覽器支持，並且希望內部透明，並且只希望使用CSS解決方案...則不能使用漸變。 你需要偽造它的影子

 .test { width: 200px; height: 80px; border-radius: 40px; position: relative; overflow: hidden; color: white; font-size: 50px; padding-left: 30px; } .test:after { content: ""; position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; border-radius: inherit; box-shadow: -20px 0px 10px 5px rgba(250, 250, 20, 1), 20px 0px 10px 10px rgba( 20, 250, 200, 1); } body { background: radial-gradient(circle, black, darkgrey); } 

 <div class="test">TEST</div>