zoukankan      html  css  js  c++  java
  • border-radius元素overflow:hidden失效问题

    父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效。

    解决方法:

    父元素使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以。

    /*image*/
      -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    /*gradient */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  • 相关阅读:
    MODBUS 数据格式相关记录
    STM32Cube基础工程配置
    QT5学习记录(一)
    求最大值
    算法训练方格取数
    传纸条
    分组背包
    混合背包
    二维背包
    多重背包
  • 原文地址:https://www.cnblogs.com/mengff/p/7526379.html
Copyright © 2011-2022 走看看