如何實現下面這個漸變的邊框效果：
這個問題本身不難，實現的方法也有一些，主要是有一些細節需要注意。
border-image是 css 規範 css backgrounds and borders module level 3 (最新一版的關於 background 和 border 的官方規範) 新增的乙個屬性值。
顧名思義，我們可以給 border 元素新增 image，類似於background-image，可以是也可以是漸變，不再侷限於純色。
有了border-image之後，實現漸變邊框變得很方便
不過多介紹 border-image 的語法，讀者需要自行了解一下。實現如下：
.border-image上面關於 border-image 的三個屬性可以簡寫為
border-image: linear-gradient(45deg, gold, deeppink) 1;得到如下結果：
仔細看上面的 demo，設定了border-radius: 10px但是實際表現沒有圓角。使用border-image最大的問題在於，設定的border-radius會失效。
我們無法得到乙個帶圓角的漸變邊框。原因，檢視官方規範 w3c 解釋如下：
為此，我們得另闢蹊徑或者稍加改進，得到帶圓角的漸變邊框。
第一種方法，我們不再使用border-image，而是使用background-image+ 偽元素 的方案，這也是在border-image規範沒有出現最常用的方法。
非常簡單，簡單的示意圖如下：
利用background-image實現乙個漸變背景，再通過疊加乙個白色背景使之形成乙個漸變邊框。
codepen demo -- bg + overflow 實現漸變邊框
這個方案有兩個問題，第乙個是多使用了兩個元素(當然在這裡是 ::before 和 ::after)，其次最致命的是，如果要求邊框內的背景是透明的，此方案便行不通了。
第二種方法，使用background-clip: content-box以及background-clip: border-box配合使用。
background-clip：background-clip 設定元素的背景（背景或顏色）是否延伸到邊框下面。它的部分取值和box-sizing類似。其中，
這裡，我們使用設定兩個background-image，設定兩個background-clip，並且將 border 設定為透明即可：
核心 css：
因為用到了background-clip: border-box，所以還需要background-origin: border-box使圖案完整顯示，可以嘗試下關掉這個屬性，即可明白為什麼需要這樣做。
codepen demo -- background-clip 實現漸變邊框
與第一種方法類似，如果要求邊框內的背景是透明的，此方案便行不通了。
這個方法也很好理解，既然設定了background-image的元素的border-radius失效。那麼，我們只需要給它加乙個父容器，父容器設定overflow: hidden+border-radius即可：
.border-image-pesudo效果如下：.border-image-pesudo::before
當然，這裡還是多借助了乙個元素實現。還有一種方法，可以不使用多餘元素實現：
設定了background-image的元素的border-radius失效。但是在 css 中，還有其它方法可以產生帶圓角的容器，那就是借助clip-path。
[clip-path](，乙個非常有意思的 css 屬性。
clip-path css 屬性可以建立乙個只有元素的部分區域可以顯示的剪下區域。區域內的部分顯示，區域外的隱藏。剪下區域是被引用內嵌的url定義的路徑或者外部 svg 的路徑。
簡而言之，這裡，我們只需要在border-image的基礎上，再利用clip-path裁剪出乙個帶圓角的矩形容器即可：
.border-image-clip-path解釋一下：
clip-path: inset(0 round 10px)。
非常完美，效果如下：
當然，還可以利用filter: hue-rotate()順手再加個漸變動畫：
你可以在我 css-inspiration 看到這個例子：
css-inspiration -- 使用 clip-path 和 border-image 實現圓角漸變邊框
好了，本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
div盒子邊框圓角 CSS之圓角邊框漸變的實現
注 測試瀏覽器版本號 chrome 75.0.3770.80 opera 60.0.3255.109 firefox 67.0 ie 11。之前 css之漸變效果的實現 中有講到邊框顏色漸變，但是只有講最普通的邊框漸變，其作用於圓角邊框漸變時會覆蓋掉圓角的效果，這不是我們預期的，所以我們需要尋找其他...
圓角邊框，漸變背景的Textview
在預設情況下，textview是不帶邊框的，如果想為textview新增邊框，只能通過為它設定乙個背景drawable，改drawble只是乙個邊框，這樣就實現了帶邊框的textview 第一步 建立shape xml檔案 border.xml 第二步 在textview中引入背景border.xm...
anroid邊框陰影 圓角陰影 漸變陰影
anroid給邊框加陰影只能對內陰影，沒有給邊框對外加陰影，在自定義shape中增加一層或多層，並錯開，即可 顯示陰影效果。給邊框加陰影可使用 1.圓角陰影效果 內陰影 不加漸變色，第一層漸變色其實沒啥用，是對整個邊框漸變，2dp的陰影還是乙個顏色。android centerx 0.5 andro...