怎么在图像上创建带有边框半径的嵌入边框

本教程将介绍如何在图像上创建带有边框半径的嵌入边框的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么在图像上创建带有边框半径的嵌入边框 教程 第1张

问题描述

怎么处理图像上带有边框半径的嵌入边框:

我可以使用大纲CSS属性

.img{
 border-radius: 16px;
 outline: 3px solid #fece40;
 outline-offset: -16px;}

但这为我提供了插入边框,但没有轮廓的半径设置。

div

使用额外的推荐答案并考虑伪元素:

.img {
  border-radius: 16px;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.img:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 3px solid #fece40;
  inset: 16px;
}

img {
  display: block;
}
<div class="img"><img src="https://picsum.photos/id/237/200/200"></div>

好了关于怎么在图像上创建带有边框半径的嵌入边框的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。