2 个回答

mask 属性吧,让UI给你一个SVG的图就行,具体可以参考我的这篇笔记
黄色的边框线可以用 filter: drop-shadow() 来实现。

单纯用CSS来实现暂时想不到比较好的解决方案,4个角落用图片遮挡?或者用 clip-path 来剪裁?

解决方案:-webkit-mask + filter: drop-shadow()

-webkit-mask: url(遮罩图片路径) left / 100% 100% no-repeat; /* 这个语法跟background差不多*/

/*接下来是边框部分,本来是写了4个filter,后来发现filter可以叠加(捂脸),只写一个就行了。四个drop-shadow()分别对应四条边框*/

filter: drop-shadow(4rpx 0rpx 0 $themeColor) drop-shadow(-4rpx 0rpx 0  $themeColor) drop-shadow(0rpx 4rpx 0  $themeColor) drop-shadow(0rpx -4rpx 0  $themeColor) ;
宣传栏