如何使用 clip-path: circle() 属性在 css 中的图像中添加边框答案

【问题标题】：How to add border in a image with clip-path: circle() property in css如何使用 clip-path: circle() 属性在 css 中的图像中添加边框
【发布时间】：2022-12-13 22:24:17
【问题描述】：

我想知道如何在图像 clip-path:circle(); 中添加边框添加边框的任何替代方法？

喜欢：边框：5px纯红色；

我试过这个：

.roundedimage {
  width: 200px;
  clip-path: circle();
}

&lt;img src="images/tv.jpg" alt="rounded Image" class="roundedimage"&gt;

下一步如何进行，因为 border-radius 不起作用

【问题讨论】：

标签： html css image border clip-path

【解决方案1】：

border-radius 处理图像。请参见下面的示例。您还有其他要找的东西吗？

.roundedimage {
  width: 200px;
  border: 5px solid red;
  border-radius:100vh;
}

&lt;img src="https://picsum.photos/id/237/200" alt="rounded Image" class="roundedimage"&gt;

【讨论】：