邊框漸變問題
阿新 • • 發佈：2017-05-24
htm 前綴 tran -s 瀏覽器支持 模擬 near 授權 origin 邊框顏色漸變：
方法一：border-color
border-color: <color>/*其中可以上一個值，也可以是多個值，具體我在這裏不多說了，大家來時用到的也特別多*/ /*我們可以分別給各邊上色*/ border-top-color: <color>/*給上邊框上色*/ border-right-color: <color> /*給右邊框上色*/ border-bottom-color:<color> /*給下邊框上色*/ border-left-color: <color> /*給左框上色*/
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-border-color ? w3cplus.com
缺點：兼容性不好，只有Mozilla的Firefox3.0+瀏覽器支持,使用時需要加前綴“-moz-”
方法二：背景圖片模擬實現
css代碼：
.gradient-block-vertical {
float:left;
margin:50px;
width:250px;
height:250px;
box-sizing:border-box;
border:20px solid transparent;
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(#fff,#fff),linear-gradient( 90deg,#5c5fa5,#fff);
}
html代碼：
<div class="gradient-block-vertical"></div>
兼容性比較好，可以正常使用
邊框漸變問題