Question

我需要一个内边框来影响这些图像。我已经查找了如何执行此操作，并且没有教程可以帮助我。我找到了一个看起来不错但似乎没有用的东西。

我已将其应用于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 */
}

应该是图像周围的完整插入圆。我什至不确定要使用的像素量，但是甚至无法查看它在做什么。！（https://imgur.com/a/c5fTMJN）

Answer 1

我认为您必须给我们提供有关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;
}

Answer 2

最简单的方法是使图像成为div的背景图像。首先，您必须从HTML中删除<img>，然后将其添加到CSS中，并确保类名与html中使用的相同：

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

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

我的测试看起来像这样，不要忘了它是矩形图像，因此它没有变成圆形：https://gyazo.com/8e9c3deb54d5f784534c6d952a028400

您的div必须为正方形，高度和宽度相同，以使其边界半径为100％时变得完全圆润。

有没有一种方法可以使用阴影框使边框具有圆形？

2 个答案: