Html 有没有一种方法可以使用长方体阴影来创建圆形的插入边框？_Html_Css

Html 有没有一种方法可以使用长方体阴影来创建圆形的插入边框？

html css

Html 有没有一种方法可以使用长方体阴影来创建圆形的插入边框？,html,css,Html,Css,我需要一个对这些图像的影响内边界。我已经查阅了如何做，没有任何教程可以帮助我。我找到了一个看起来不错但似乎不起作用的我已经将其应用于div、id，甚至图像本身 #img{ box-shadow: inset 0 10px 0 rgba(255,255,255,.5), /* Top */ inset -10px 0 0 rgba(255,255,255,.5), /* Right */ inset 0 -10px 0 rgba(255,2

我需要一个对这些图像的影响内边界。我已经查阅了如何做，没有任何教程可以帮助我。我找到了一个看起来不错但似乎不起作用的

我已经将其应用于div、id，甚至图像本身

#img{
    box-shadow:
        inset 0 10px 0 rgba(255,255,255,.5), /* Top */
        inset -10px 0 0 rgba(255,255,255,.5), /* Right */
        inset 0 -10px 0 rgba(255,255,255,.5), /* Bottom */
        inset 10px 0 0 rgba(255,255,255,.5), /* Left */
        inset -7.5px 7.5px 0 rgba(255,255,255,.5), /* Top Right */
        inset -7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Right */
        inset 7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Left */
        inset 7.5px 7.5px 0 rgba(255,255,255,.5); /* Top Left */
    -moz-box-shadow:
        inset 0 10px 0 rgba(255,255,255,.5), /* Top */
        inset -10px 0 0 rgba(255,255,255,.5), /* Right */
        inset 0 -10px 0 rgba(255,255,255,.5), /* Bottom */
        inset 10px 0 0 rgba(255,255,255,.5), /* Left */
        inset -7.5px 7.5px 0 rgba(255,255,255,.5), /* Top Right */
        inset -7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Right */
        inset 7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Left */
        inset 7.5px 7.5px 0 rgba(255,255,255,.5); /* Top Left */
    -webkit-box-shadow:
        inset 0 10px 0 rgba(255,255,255,.5), /* Top */
        inset -10px 0 0 rgba(255,255,255,.5), /* Right */
        inset 0 -10px 0 rgba(255,255,255,.5), /* Bottom */
        inset 10px 0 0 rgba(255,255,255,.5), /* Left */
        inset -7.5px 7.5px 0 rgba(255,255,255,.5), /* Top Right */
        inset -7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Right */
        inset 7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Left */
        inset 7.5px 7.5px 0 rgba(255,255,255,.5); /* Top Left */
}

它应该是围绕图像的一个完整的插入圆。我甚至不确定像素的使用量，但我甚至不能让它工作，看看它在做什么。

!（）

我认为您必须向我们介绍html结构和所有相关css。当您描述html页面和css结构时，您可能会发现一些错误或不正确的方法来准备静态网页

这可能是关注点分离（SoC）在计算机科学中的应用之一。试着划分你的不同部分并描述它，你会发现问题所在

这是工作的样本

<body>
    <div class="roundedCorner">
    </div>
</body>

.roundedCorner
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    -moz-box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    -webkit-box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    -o-box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    border-radius:25px;
}


.圆角
{
宽度：350px；高度：200px；
边框：实心1px#555；
背景色：#eed；
盒影：10px-10px 5px rgba（0,0,0,0.6）；
-moz盒阴影：10px-10px 5px rgba（0,0,0,0.6）；
-网络工具包盒阴影：10px-10px 5px rgba（0,0,0,0.6）；
-o形盒阴影：10px-10px 5px rgba（0,0,0,0.6）；
边界半径：25px；
}

实现这一点的最简单方法是将图像设置为div的背景图像。首先，您必须从html中删除

，然后将其添加到css中，并确保类名与您在html中使用的类名相同：

div .round-image {
      border-radius: 100%;
      background: url(2.jpg);
      box-shadow: inset 0 0 0 10px #ffffff96;
}

如果愿意，您可以将颜色代码（#…）更改为任何透明颜色，您可以在线找到rgba（透明）颜色生成器，或者在浏览器中使用inspector工具的颜色选择器和透明度选择器

我的测试是这样的，不管怎样，它是一个矩形图像，所以它没有变成圆形：

您的div必须是正方形、相同的高度和宽度，才能成为边界半径为100%的完美圆形。

对此表示抱歉。这是HTML:这是所有与此相关的CSS，我没有包括：。产品img{对齐项目：中心；显示：内联；边距：0自动；高度：100%；宽度：自动；}.img{显示：块；边距：0自动；文本对齐：中心；宽度：175px；高度：175px；位置：相对；溢出：隐藏；边框半径：50%；}我猜你提供的html代码是自我解释的。很抱歉。我是这个网站的新手。我不知道如何添加你想要的代码。起初不要将img用作类或img。这些节点是默认注释，而不是自定义标签。我将名称改为overlay，但仍然不起作用。