优惠券内陷样式(无兼容性问题)
程序员文章站
2022-07-04 08:18:33
radial-gradient 在微信小程序ios中会有兼容性问题效果如图:// html
radial-gradient
在微信小程序ios中会有兼容性问题
效果如图:
// html
<view class="cro">
<view class="cro_left_top"></view>
<view class="cro_right_top"></view>
<view class="cro_left_bottom"></view>
<view class="cro_right_bottom"></view>
</view>
// css
.cro {
width: 600rpx;
height: 300rpx;
background: #0c8;
position: relative;
margin: 200rpx auto;
}
.cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {
position: absolute;
width: 40rpx;
height: 40rpx;
border: 1px solid #fff;
z-index: 1;
background: #fff;
}
.cro_left_top {
top: -1px;
left: -1px;
border-radius: 0px 0px 40rpx 0px;
border-bottom: 1px solid #0c8;
border-right: 1px solid #0c8;
}
.cro_right_top {
top: -1px;
right: -1px;
border-radius: 0px 0px 0px 40rpx;
border-bottom: 1px solid #0c8;
border-left: 1px solid #0c8;
}
.cro_left_bottom {
left: -1px;
bottom: -1px;
border-radius: 0px 40rpx 0px 0px;
border-top: 1px solid #0c8;
border-right: 1px solid #0c8;
}
.cro_right_bottom {
right: -1px;
bottom: -1px;
border-radius: 40rpx 0px 0px 0px;
border-top: 1px solid #0c8;
border-left: 1px solid #0c8;
}
本文地址:https://blog.csdn.net/qq_37034928/article/details/108863835
下一篇: 游侠X汽车被指改装自特斯拉 创始人否认
推荐阅读
-
dom.style.prop脚本化CSS:读写元素css属性, 可读写行间样式,没有兼容性问题。 window.getComputedStyle(ele,null)。
-
JS来获取全局样式值—style,currentStyle,getComputedStyle() 并解决浏览器兼容性问题
-
浏览器样式兼容性问题及解决方式(一)
-
获取非行间样式-各个浏览器兼容性问题
-
优惠券内陷样式(无兼容性问题)
-
input元素[type="file"]时的样式定制及浏览器兼容性问题探讨_HTML/Xhtml_网页制作
-
优惠券内陷样式(无兼容性问题)
-
input元素[type="file"]时的样式定制及浏览器兼容性问题探讨_HTML/Xhtml_网页制作
-
JS读取内联样式 并解决浏览器兼容性问题
-
Android自定义RadioButton样式偏移兼容性问题