需求背景

需要实现一个带内边框的图片效果

具体实现

提起内边框，首先想到的是借助CSS的属性outline、outline-offset实现。W3C文档对这两者的描述如下：

outline：在一条声明中设置多个轮廓属性的简写属性。它的的特点是：
- outline不占据空间，绘制于元素内容周围。
- 根据规范，outline通常是矩形，但也可以是非矩形的。
outline-offset：用于设置 outline 与一个元素边缘或边框之间的间隙。outline是元素的轮廓，悬浮在元素边框之上。元素和其outline之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

为了方便看出效果，将给图像outline（轮廓）设置为半透明色

/**
* @file css
*/

* {
    margin: 0; 
    padding: 0;
}
.container {
    padding: 50px;
}
.img-wrapper {
    display: inline-block;
    position: relative;
    border-radius: 14px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
img {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: -2px;
    box-sizing: border-box;
}

<!-- html -->
<body>
    <div class="container">
        <div class="img-wrapper">
            <img src="./images/img1.jpg" alt="">
        </div>
        <div>
            <h2>这是一个圆角图片</h2>
            <p>图片具有2px的内边框</p></p>
        </div>
    </div>
</body>

问题现象

可以看出，在Safari浏览器中，图片的圆角正常，设置的内边框也生效了，只是内边框在Safari上并没有按照图片边框圆角显示，不符合预期。

解决方案

W3C文档中，Safari浏览器 v12+ 是支持outline和outline-offset属性的，但是Safari在处理圆角边框的轮廓时是存在问题的。

为实现预期效果，本文抛弃使用outline，通过使用伪类实现，实现效果符合预期

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0; 
            padding: 0;
        }
        .container {
            padding: 50px;
        }
        .img-wrapper {
            display: inline-block;
            position: relative;
            border-radius: 14px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            background: url(./images/img1.jpg) no-repeat center;
            background-size: contain;
        }
        .img-wrapper::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border: 2px solid rgba(255, 255, 255, .5);
            border-radius: 14px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="img-wrapper">
        </div>
        <div>
            <h2>这是一个圆角图片</h2>
            <p>图片具有2px的内边框</p></p>
        </div>
    </div>
</body>
</html>

记录outline在safari下圆角失效解决

需求背景

具体实现

问题现象

解决方案

实现代码