Html 带有边框半径和框阴影的CSS剪辑路径

我试图以一种响应的方式对这张卡进行编码，但我无法让它工作

我还尝试将导出的SVG用作背景和：before元素，但对于动态内容高度，这并不好

然后我尝试了CSS剪辑路径，但无法获得圆角边框和轻微的框阴影

代码如下：

.shaped卡{
宽度：20%；
填料：1米2米；
位置：相对位置；
背景#FBF2E2；
-webkit剪辑路径：url（#剪辑）；
剪辑路径：url（#剪辑）
}

头条新闻
全海最好的Lorem Ipsum发电机！把这个卑鄙的模仿者扔到下一次冒险中去，诱使客户走上各种布局的木板！在上面配置，然后获得你的海盗ipsum…拥有公海，arg

一种更简单的方法是使用背景色和边框半径如下的

skewY

：

.shaped卡{
宽度：20%；
填料：1米2米；
位置：相对位置；
边界半径：10px；
边缘底部：100px；
背景#FBF2E2；
}
.形状卡：：之前{
边界半径：10px；
边缘底部：100px；
盒影：6px 6px 24px rgba（0,0,0,0.16）；
内容：“；
宽度：100%；
高度：60px；
z指数：-1；
左：0；
排名：0；
位置：绝对位置；
}
.成型卡片：：之后{
内容：“；
位置：绝对位置；
背景#FBF2E2；
变换：歪斜（10度）；
边界半径：10px；
宽度：100%；
身高：100%；
顶部：50px；
左：0；
z指数：-1；
盒影：6px 6px 24px rgba（0,0,0,0.16）；
}

头条新闻
全海最好的Lorem Ipsum发电机！把这个卑鄙的模仿者扔到下一次冒险中去，诱使客户走上各种布局的木板！在上面配置，然后获得你的海盗ipsum…拥有公海，arg

如果使用

svg

，请使其大小与元素大小匹配，但从

剪辑路径切断时，
框阴影将不会显示

您可以从透明的父级使用
过滤器
，请参阅：

可能的例子：


.shaped卡{
宽度：475px；
高度：510px；
填料：1米2米；
位置：相对位置；
背景：番茄；
-webkit剪辑路径：url（#剪辑）；
剪辑路径：url（#剪辑）；
}
部分{
过滤器：投影（0 0 5px#000）；
}
svg{
位置：绝对；右侧：100vw；
}

头条新闻
全海最好的Lorem Ipsum发电机！把这个卑鄙的模仿者扔到下一次冒险中去，诱使客户走上各种布局的木板！在上面配置，然后获得你的海盗ipsum…拥有公海，arg

我已经想到了这一点，但放弃了这个想法，因为在上面设置一个合适的方框阴影似乎是不可能的。是吗？你能给我一个你正在尝试应用的方块阴影的例子吗？一个简单的方块阴影到整个卡上。即使有一个额外的伪元素，它仍然看起来在中间。用路径更新问题您所说的响应是什么意思？如何根据设备/视口的大小更改该视图的外观？