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) ;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏