个性化border-image

Young_joyyy

于 2022-04-16 10:37:07 发布

阅读量138

点赞数

分类专栏：每天一个前端小技巧文章标签： js css

本文链接：https://blog.csdn.net/Young_joyyy/article/details/124209415

版权

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS3的border-image属性创建一个右边框透明渐变的样式，解决border-right未完全覆盖的问题，通过`-webkit-linear-gradient`实现从透明到指定颜色的过渡。

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

实现效果
在这里插入图片描述

右边框border-right没有完全覆盖，可以看到上下有透明部分

 border-right: 0.01rem solid #D3D3D3
 border-image: -webkit-linear-gradient(bottom, transparent 2%, #D3D3D3 2%, #D3D3D3 98%, transparent 98%) 1

关注

专栏目录