css：使用单面轮廓和轮廓偏移？

Posted 2023-03-05

【中文标题】css：使用单面轮廓和轮廓偏移？

【英文标题】：css: Use single-sided outline and outline-offset?

【发布时间】：2022-01-19 23:32:50

【问题描述】：

我想为带有outline 和outline-offset 的图像添加一个内部框架，但只在顶部和底部，但是没有outline-offset-top、outline-offset-bottom、outline-offset-left 或@ 这样的东西987654326@.

有没有人知道这样做的任何方法或替代方法？

img 
    vertical-align: middle;
    border-style: none;
    outline: 70px solid white;     
    outline-offset: -70px;

    <img src="https://cdnnmundo1.img.sputniknews.com/img/07e5/08/17/1115327694_182:0:2230:2048_1920x0_80_0_0_0642590b6896368f2c051719f7c66ea7.jpg">

【参考方案1】：

使用剪辑路径剪切顶部而不是添加白色

img 
  clip-path:inset(70px 0 0);

<img src="https://cr.epaenlinea.com/pub/media/version20200605/catalog/product/cache/a83b746ef25730b9cb1cc414bac0f04a/1/2/1246118_3.jpg">

【讨论】：

感谢您的回答，有什么方法可以给消失的区域添加背景？