边框渐变问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了边框渐变问题相关的知识，希望对你有一定的参考价值。
边框颜色渐变：
方法一：border-color
border-color: <color>/*其中可以上一个值，也可以是多个值，具体我在这里不多说了，大家来时用到的也特别多*/ /*我们可以分别给各边上色*/ border-top-color: <color>/*给上边框上色*/ border-right-color: <color> /*给右边框上色*/ border-bottom-color:<color> /*给下边框上色*/ border-left-color: <color> /*给左框上色*/
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
缺点：兼容性不好，只有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>
兼容性比较好，可以正常使用
以上是关于边框渐变问题的主要内容，如果未能解决你的问题，请参考以下文章