这种边框用css要怎么实现？

Question

Answer 1

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

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

Answer 2

解决方案：-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) ;