关于使用border-image后，border-radius无效的问题

最新推荐文章于 2024-03-22 16:54:56 发布
最新推荐文章于 2024-03-22 16:54:56 发布
阅读量1.2w 收藏 2
点赞数 2
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bajie_year/article/details/101218871
版权

在项目上使用border-image设置渐变边框后，发现border-radius的设置圆角边框无效
解决方案：
在当前的元素加一个父盒子，对父盒子使用背景渐变，然后，添加padding属性padding的值就是渐变颜色的边框的值，还要设置box-sizing和属性，然后设置border-radius，注意这个border-radius的值，父盒子和子盒子的值是相同的，然后设置子盒子的背景色为白色就可以解决了
效果图：
在这里插入图片描述

青枫岸，白石湫
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clip-path:解决设置border-image后border-radius不生效问题
weixin_44198018的博客
06-16 7515
想使用css实现一个带圆角的渐变边框 代码及结果如图： 虽然设置了border-radius:10px但结果仍是直角，查阅文档后W3C给出的解释：A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such
box-shadow和drop-shadow实现不规则投影实例代码
12-13
当我们想给一个矩形或其他能用 border-radius 生成的形状（在“自适应的椭圆”一节中可以看到一些示例）加投影时，box-shadow 的表现都堪称完美。但是，当元素添加了一些伪元素或半透明的装饰之后，它就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括： 半透明图像、背景图像、或者 border-image（比如老式的金质像框）； 元素设置了点状、虚线或半透明的边框，但没有背景（或者当background-clip 不是 border-box 时）； 对话气泡，它的小尾巴通常是用伪元素生成的； 如果我们打算对这类元素直接应用
解决使用border-image后border-radius不生效(使用background)
2301_76742166的博客
02-21 1063
解决使用border-image后border-radius不生效(使用background)
【随手小记】border-image和border-radius 冤家路窄
qq_35227244的博客
03-22 180
随手小记：UI小姐姐很喜欢设计 带渐变的圆角边框框，but ，暴风哭泣：border-radius和border-image不能很好的合在一起，平平淡淡写一起会发现，只有渐变、没有圆角，变成直角了。
border-image和border-radius不兼容问题，非主流解决方法
LunaLee38的博客
09-13 717
看了下大部分的解决方法都是这三种，1.使用两层元素；3.clip-path，但都不适用于我或者对我的情况无效，于是根据自己之前实现某个UI的思路来解决这个问题吧。之前实现这四个角是用到before和after伪元素。
关于css样式中border-radius和border-image不兼容问题
qq_44853234的博客
12-10 2656
关于css样式中border-radius和border-image不兼容解决办法 实现效果如下： 之前一直使用 width: 120px; height: 120px; background: #FFFFFF; border: 8px solid; border-image: linear-gradient(0deg, #A002DF, #045DFE) 10 10; border-radius: 50%; 这种方式，效果总是达不到，笔者经过多次试验，可以使用外面套一层div实现，如下： <di
CSS渐变色边框，解决border设置渐变后，border-radius无效的问题
热门推荐
水荷的博客
11-01 6万+
需求：用css设置渐变边框 通过border-image来实现渐变色边框 &amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; .content { width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-line
设置border-image后border-radius不生效的问题解决
Ruiqi8的博客
12-01 1148
只需要把 border-radio 变成 clip-path: inset(0 round 12rpx);
border-image巧妙实现带圆角的渐变边框
細水、長流√的专栏
03-01 6362
如何实现下面这个渐变的边框效果：这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。
边框设置渐变色和圆角的问题
huihui_999的博客
11-24 5359
渐变框和圆角同时设置无效的问题
border-image和border-radius一起使用border-radius不起作用
_web_Z的博客
09-06 1148
解决方案：最外层父盒子假如叫A添加 background为border-image的值，以及添加 boder-radius。关于border-image和border-radius一起使用border-radius不起作用。再添加一层父盒子假如叫B 添加padding值为border的宽度。最外层父盒子的border-radius设置稍大一点效果会更好！最终表现效果是 .tab_box设置的border-radius。C和D都是子盒子 单独设置其border-radius。
css通过border-image设置渐变边框的时候，border-radius无效
GongWei_的博客
08-01 4160
bug图，这里设置了border-radius但是未生效 解决思路： 思路一:最简单的是叫ui把边框切下来，然后background：url（）插入当背景图 思路二： 放两个盒子，父盒子设置背景渐变色，并且设置padding值，值为边框的大小，记得设 box-sizing:border-box；然后再设置border-radius。 子盒子宽高设置100%，背景色设置原本的背景色将父盒子的渐变色覆盖，最重要的 border-radius值要和父盒子保持一致 可以看到注释部分就是我踩的坑，原本想直接用b
CSS3圆角边框和边界图片效果实例
12-13
本文的学习要点如下：  •圆角 border-radius •盒阴影 box-shadow •边界图片 border-image 1.圆角 border-radius XML/HTML Code复制内容到剪贴板 <div>border-radius 属性允许您为元素添加圆角边框！ </div>      div {        width: 200px;        height: 100px;        padding:20px;        border: 1px solid red;        border-r
HTML5实践--如何使用css3丰富我们的图片样式
03-04
在css3中，直接在图片上使用box-shadow和border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow,border-radius和transition创建不同图片样式效果。通过查看demo能注意到，我们为第一行图片设置了border-radius和内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲染。firefox效果：chrome/safari为了使borde
tailwindcss-border-gradient-radius:用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序一起使用
05-29
基于 background-origin 和 background-image 的 Tailwind CSS 边框渐变插件 用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序类一起使用。 该插件基于 。 看看它的实际效果： : 要求 此插件需要 ...
实验-三、数据库安全性(目的、要求和模板).doc
04-24
实验-三、数据库安全性(目的、要求和模板).doc
基于Docker搭建K8s集群离线包
04-24
基于Docker搭建K8s集群离线包，包含部署时所需的全部文件，可在内网环境中使用，K8s为1.23.0版本，docker为20.10.9-3版本
基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip
最新发布
04-24
基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！基于springboot+vue实现的求
基于Android系统Api封装常用工具类.zip
04-24
基于Android系统Api封装常用工具类.zip
如何实现view设置border-image后border-radius不失效
09-20
要实现`border-image`与`border-radius`同时生效，可以使用以下方法： 1. 将`border-image`属性应用于伪元素而不是实际的元素。通过这种方式，将`border-radius`应用于实际元素，同时将`border-image`应用于伪元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值