Css 实现父元素设置 border-radius 时影响子元素圆角

实现效果

代码

<view class="my-group-page-card-img"><image class="portrait-img" src="@/static/img/head portrait.jpg"></image><image class="portrait-img" src="@/static/img/head portrait2.jpg"></image><image class="portrait-img" src="@/static/img/head portrait3.jpg"></image><image class="portrait-img" src="@/static/img/head portrait4.jpg"></image>
</view>

<style scoped>.my-group-page-card-img {width: 92upx;height: 92upx;font-size: 0;border-radius: 17px;overflow: hidden;}.portrait-img {width: 46upx;height: 46upx;}
</style>

实现关键点在于 overflow: hidden;

Css 实现父元素设置 border-radius 时影响子元素圆角相关推荐

关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式 ...
css 父级设置了padding，但是子元素还是会超过padding解决方案
由上图所示,明明父级已经设置了一个padding,但是子元素还是跑出来了,这是为什么呢? 我看了一下,是因为子元素,设置了width100%,以后还设置了padding,导致的问题,因为我们的盒子是标 ...
ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
在使用 vu围幸业很例站闪以近着好务多如宽动为近着好edraggable 做拖拽效果时,因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我 ...
CSS中如何设置父元素透明度不影响子元素透明度
css中经常会遇到设置了父元素的透明度,后会直接影响到子元素的透明度. 例如: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明 ...
Css hover时取子元素切换img 实现图片移入切换
<div class="patent-case"><div class="patent-title-imgo"><img src= ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
浅谈设置父元素透明度不影响子元素透明度
浅谈设置父元素透明度不影响子元素透明度筱葭 2017-03-15 10:50:00 11970 收藏 2 展开设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素o ...
动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
代码: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
想调节—下父元素的透明度，但是又不影响子元素的透明度，怎么破？
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

Css 实现父元素设置 border-radius 时影响子元素圆角

Css 实现父元素设置 border-radius 时影响子元素圆角相关推荐

最新文章

热门文章