background-img会导致外层的div的border-radius失效

最新推荐文章于 2024-02-21 18:20:40 发布
最新推荐文章于 2024-02-21 18:20:40 发布
阅读量1.4k 收藏
点赞数
分类专栏： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aeoliancrazy/article/details/83508898
版权
html 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏

background-img会导致外层的div的border-radius失效

目前没有找到具体的问题所在

我的解决方式是：

在img下方新建一个div，设置宽和图片一样

高度适当，把这个div放在图片下方，并设置

border-bottom-left:5px;//左下圆角
border0bottm-right:5px;//右下圆角

顶部的圆角遇到，则相同处理，或用其他的方式处理

aeoliancrazy
关注
专栏目录
EMP界面开发规范-界面标签
gxf_ming的博客
04-01 1334
控件支持属性和样式对照表 这里整理了控件支持的属性和样式，用于方便查阅及对照; 在各个控件的定义中有对其支持属性和样式的详细描述。 控件支持属性对照表控件支持样式对照表关于Lua中可以操作的样式及属性 1 控件支持属性对照表 下面的表格为具体控件对属性的支持情况： proper属性 name value text tagName hide focus e
CSS-Cascading Style Sheet_层叠样式表_用法详解
qq_31455841的博客
09-26 2810
CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表 1. 专门用来为HTML标签添加样式 2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等 3. 层叠属于CSS的三大特性之一 4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 2. CSS 使用目的 1. CSS 之前 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单
关于background-image和border-radius设置圆角不生效的问题
m0_60602811的博客
07-12 937
【代码】关于background-image和border-radius设置圆角不生效的问题。
解决使用border-image后border-radius不生效(使用background)
最新发布
2301_76742166的博客
02-21 3430
解决使用border-image后border-radius不生效(使用background)
border-image和border-radius一起使用border-radius不起作用
_web_Z的博客
09-06 2292
解决方案：最外层父盒子假如叫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。
设置border-image后border-radius不生效的问题解决
Ruiqi8的博客
12-01 2511
只需要把 border-radio 变成 clip-path: inset(0 round 12rpx);
CSS渐变色边框，解决border设置渐变后，border-radius无效的问题
热门推荐
水荷的博客
11-01 7万+
需求：用css设置渐变边框 通过border-image来实现渐变色边框 <div class="content"></div> .content { width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-line
父元素的border-radius不生效的问题处理
weixin_43837268的博客
07-06 365
【代码】父元素的border-radius不生效的问题处理。
border-image和border-radius不兼容问题，非主流解决方法
LunaLee38的博客
09-13 1240
看了下大部分的解决方法都是这三种，1.使用两层元素；3.clip-path，但都不适用于我或者对我的情况无效，于是根据自己之前实现某个UI的思路来解决这个问题吧。之前实现这四个角是用到before和after伪元素。
vue中使用better-scroll上拉加载及swiper轮播图的笔记
mao2411的博客
07-30 340
演示部分（better-scroll）： 代码位置部分： 该组件详细代码部分： <template> <div> <div class="scroll" :style="{height:height+'px'}"> <loader1 v-if="isLoader"></loader1> <ul v-if="!isLoader"> <li v-for="(item
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2502
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4820
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
外层使用border-radius内层还是矩形问题
12-06 971
外层容器使用border-radius:4px 内层还是矩形 可以在外层加上overflow: hidden
小程序选项卡（01初步）+边框border-radius 和 border-image冲突
I_Do_Well的博客
03-08 742
方法:在选择边框外面加一个盒子，用怪异盒子padding把中间的盒子固定在中间然后加背景色。border-radius 和 border-image冲突。思路： 用background-image解决。这样padding的范围就等于内部盒子的边框。
设置 border-image渐变色后，再设置border-radius不生效，强行写渐变色border样式
weixin_44019706的博客
05-19 1104
这是一个已知的问题，同时设置 border-image 浙变色和 border-radius 时，border-radius 会被 border-image 覆盖，导致设置无效 （是吗是吗是吗是吗是吗是吗）
border-radius不被遮挡住
weixin_30799995的博客
05-10 624
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> </head> <style type="text/css"> #wrapper { position: absolute; }...
div里的span被div遮住了，盖住了，已解决！
diaofuzuo3286的博客
05-07 1751
今天遇到一个问题， 外层是div，里面是span 但浏览网页的时候span的内容被div给遮住了，盖住了，看不到了。 经查询测试，设置span的z-index:99999就可以了，呵呵。 转载于:https://www.cnblogs.com/hfzsjz/archive/2013/05/07/3065903.html...
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 550
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
自学web前端笔记小结---CSS3
qq_41801762的博客
09-15 748
CSS3笔记 CSS3选择器规范地址： 问题： 1.CSS:cascading style sheets（层叠样式表） 面试常问 2.样式表及组成关系：由一条条规则（选择器+声明块）组成 笔试常考 声明：CSS属性+CSS属性值组成的键值对 3.浏览器读取编译CSS的顺序：从右往左 eg.div ul li .test{ } 为什么？有机会一次选中目标元素（算法复杂度低） 4...
border-radius属性失效问题的解决办法
祈澈菇凉
10-23 3万+
今天调试项目的时候突然发现，设置的border-radius竟然失效了，打开f12，眼看着浏览器把这个属性也给划掉了，不是一般的郁闷，按照道理来说，不应该会出现这样神奇的bug。 图片.png css代码： #photo{ width: 80px; height:80px; border-radius:10px ; } 解决办法：万能的!im...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值