CSS实现渐变圆角边框

渐变边框可以使用border-image，但带有圆角的渐变边框单靠border-image却无法实现，那有哪些方法可以实现圆角渐变边框呢？

css实用小知识，你肯定用得上

方案一：使用`border-image`+`clip-path`实现

 <style>
.radius-gradient-border1{max-width: 300px;padding: 8px;border: 5px solid transparent;border-image: linear-gradient(90deg, #387EE8, #f60) 1;border-radius: 5px;margin-bottom: 20px;color: #f60;background-color: rgba(255,255,255,0.5);clip-path: inset(0 0 round 5px);
}
</style><div class="radius-gradient-border1"><p>border-image</p>+<p>clip-path</p>实现
</div>

优点是内容背景可以透明

方案二：`background-image`+`background-clip`实现

<style>
.radius-gradient-border2{max-width: 300px;padding: 0;border-radius: 5px;border: 5px solid transparent;margin-bottom: 20px;color: #f60;/* 这里需要设置两个背景，第一个背景是内容区域的白色背景，另一个是实现渐变边框的背景 */background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #387EE8, #f60);/* 设置背景图标的坐标原点为border-box区域的左上角，因为我们希望背景可以渗透到边框处，因此需要从边框处开始裁切，因此需要设置为border-box，默认为padding-box的左上*/background-origin: border-box;/* 背景裁切的时候，第一个背景需要从内容区域开始裁切，因此设置为content-box；
第二个背景需要作为渐变边框，因此需要从边框处开始裁切 */background-clip: content-box, border-box;
}
</style><div class="radius-gradient-border2"><p> background-image </p>+ <p>background-clip</p>实现
</div>

缺点：

内容背景不能半透明
实现复杂
不能使用padding

方案三：`border-image`+`overflow: hidden`实现

<style>
.radius-gradient-border3{max-width: 300px;border-radius: 5px;margin-bottom: 20px;overflow: hidden;
}
.radius-gradient-border3 .inner{padding: 8px;border: 5px solid transparent;border-image: linear-gradient(90deg, #387EE8, #f60) 1;color: #f60;background-color: rgba(255,255,255,0.7);
}
</style><div class="radius-gradient-border3"><div class="inner"><p>border-image</p>+<p>overflow: hidden</p>实现</div>
</div>

缺点：需要多嵌套一层父元素，并且还需要设置overflow: hidden;

方案四：`background-image`+`父div`实现

<style>
.radius-gradient-border4{max-width: 300px;padding: 5px;border-radius: 5px;background-image: linear-gradient(90deg, #387EE8, #f60);
}
.radius-gradient-border4 .inner{background-color: rgba(255,255,255,0.7);
}
</style><div class="radius-gradient-border4"><div class="inner"><p>background-image</p>+<p>父div</p>实现</div>
</div>

这个缺点和方案三一样

CSS实现渐变圆角边框相关推荐

纯CSS样式实现圆角边框
圆角应用的比较广泛,比如说一些说明的div,或者模块的div,圆角的button等. 公司的页面一般是用图片实现的,坑爹的是这次的图片整个边框的上面或整个都是一个图片,我现在要调整大小受到图片的限制了 ...
CSS实现圆,圆角边框
用CSS可以实现圆,圆角边框,下面具体演示一下这两个图案一.圆形思路:圆形实际上是在一个正方形的基础上加一个border-radius属性实现的代码如下: <style>div {h ...
【CSS应用篇】——CSS如何实现圆角边框
目录问题引入: 如何实现元素的圆角样式: 使用圆角属性细节: 格式: 实操演示: 案例: 一,实现正圆: 二,实现胶囊按钮问题引入: 我们在学完盒子模型之后,创建的盒子总是方方正正的,然而在实际应 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
php边框圆角,css如何设置圆角边框？css设置圆角边框的方法(图文)
css如何设置边框?很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角边框比如按钮之类的,那么,我们该怎么来设置圆角边框呢?本篇文章将给大家来介绍一下css设 ...
css如何实现圆角边框
圆角边框属性是css3新增的属性,在圆角边框属性出现之前想要实现圆角边框都是用图片做背景实现的,现在有了圆角边框属性实现圆角效果就简单多了. 1.圆角边框属性 :border-radius:可以为元素 ...
html盒子圆角属性,CSS盒子模型-圆角边框
CSS3中新增了圆角边框样式,可以将盒子变为圆角. border-radius 用于设置元素的外边框圆角. 语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正 ...
css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置
到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...
css border渐变_css边框渐变
在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 border渐变进入平台注意问题:border-image的使用是不能实现圆角 ...

CSS实现渐变圆角边框

方案一：使用`border-image`+`clip-path`实现

方案二：`background-image`+`background-clip`实现

方案三：`border-image`+`overflow: hidden`实现

方案四：`background-image`+`父div`实现

CSS实现渐变圆角边框相关推荐

最新文章

热门文章

CSS实现渐变圆角边框

方案一：使用border-image+clip-path实现

方案二：background-image+background-clip实现

方案三：border-image+overflow: hidden实现

方案四：background-image+父div实现

CSS实现渐变圆角边框相关推荐

最新文章

热门文章

方案一：使用`border-image`+`clip-path`实现

方案二：`background-image`+`background-clip`实现

方案三：`border-image`+`overflow: hidden`实现

方案四：`background-image`+`父div`实现