<template>
<view class="flex-col">
<!--第一种方法,css伪类-->
<!--缺点:最多只能实现两个切角,因为只有before和after-->
<view class="wx-box"></view>
<!--第二种方法,径向渐变-->
<!--缺点:切角显示有毛边,且由于是上下左右四张背景拼接,可能会出现白色缝隙-->
<view class="jp-box"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.flex-col {
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50rpx;
}
//css伪类实现//
.wx-box {
width: 300rpx;
height: 200rpx;
background-color: rgba(200, 200, 200, 0.5);
position: relative;
}
.wx-box::before {
content: "";
position: absolute;
width: 40rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: #ffffff;
top: -20rpx;
right: -
06-10
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交