CSS3 边框渐变背景色border-image: linear-gradient()

最新推荐文章于 2024-07-25 22:03:21 发布

_格鲁特宝宝

最新推荐文章于 2024-07-25 22:03:21 发布

阅读量8.5k

点赞数 2

分类专栏： Web FrontEnd CSS 文章标签： border-image linear-gradient 边框渐变

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/88952727

版权

本文介绍了如何使用CSS3的border-image属性结合linear-gradient创建边框渐变背景。首先，讲解了border-image: gradient top right bottom left;的写法，其中第一个参数需指定渐变类型，其余参数类似border-width。接着，通过实例展示了边框渐变效果，并指出该属性的三个注意事项：1) 需要加上浏览器内核前缀；2) 至少两个参数，否则可能导致不预期的正方形背景；3) 参数值限制，以避免背景超出元素范围。

摘要由CSDN通过智能技术生成

写法

border-image: gradient top right bottom left;

第一个参数是带有浏览器内核的元素背景渐变写法，如：-webkit-linear-gradient()

第二至第五个参数写法与边框宽度（border-width）的写法是一致的

实例

/* 如下图.border-image1 */
.border-image1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 80px solid;
    border-image: -o-linear-gradient(top, red 20%, blue 40%, green 60%, black 80%) 100 100 100 100;
    border-image: -ms-linear-gradient(top, red 20%, blue 40%, green 60%, black 80%) 100 100 100 100;
    border-image: -moz-linear-gradient(top, red 20%, blue 40%, green 60%, black 80%) 100 100 100 100;
    border-image: -webkit-linear-gradient(top, red 20%, blue 40%, green 60%, black 80%) 100 100 100 100;
}
/* 如下图.border-image2 */
.border-image2 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 80px solid;
    border-image: -o-linear-gradient(left top, red 20%, blue 4