Question

我有一张图片，我正在寻找一个我用HTML创建的小型网站的基本自定义。

我知道你可以对this question here上看到的图像进行倒角，这样可以得到45度的切割。

我希望每个角落都有更圆润的倒角？（我相信它被称为圆角，但我不能100％确定正确的术语。

如第二张图所示：

使用border-radius: 16px 16px 16px 16px;将其放入img课程，但我不希望所有图片都受到影响。

如果只允许选择的图像被倒角，我需要做什么？

我尝试了这个，但它不起作用：

.img-chamfer {
    border-radius: 16px 16px 16px 16px;
}

<div class="img-chamfer"> 
    <img src="Test.png" >
</div>

我的确切代码可以在这里找到：https://jsfiddle.net/netazv40/

.main {
  color:#29abe2;
  text-align: center
}
  
.img-wrapper {
  display: inline-block;
}

.img-wrapperPadding {
  display: block;
  margin: 0 auto 32px;
}
  
img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div class="main">
    <div class="img-wrapper">
        <div class="img-wrapperPadding">
            <img src="http://placehold.it/350x208" width="350" height="208"><br/>
            <img src="http://placehold.it/100x50" width="100" height="50">
        </div>
    </div>
    <div class="img-wrapper">
        <div class="img-wrapperPadding">
            <img src="http://placehold.it/350x208" width="350" height="208"><br/>
            <img src="http://placehold.it/100x50" width="100" height="50">
        </div>
     </div>
</div>

我只需要对较大的图像进行影响/倒角。

Answer 1

提供小提琴后

解决方案

您可以使用以下CSS规则：

.img-wrapperPadding img[width="350"] {
    border-radius:16px;
}

演示： https://jsfiddle.net/netazv40/3/

...或者在图片中添加一个类并按如下方式解决：

＆＃13;

.rborder {
  border-radius:16px;
}

＆＃13;

<img class="rborder" src="http://placehold.it/100x100"/>

＆＃13;

演示： https://jsfiddle.net/netazv40/1/

解决方案＃1（使用flexbox）：

＆＃13;

.img-chamfer {
  border-radius:16px;
  display:inline-flex;
  overflow:hidden;
}

＆＃13;

<div class="img-chamfer">
  <img src="http://placehold.it/100x100">
</div>

＆＃13;

解决方案＃2（使用inline-block）：

＆＃13;

.img-chamfer {
  border-radius:16px;
  display :inline-block;
  overflow:hidden;
  font-size:0;
}

＆＃13;

<div class="img-chamfer">
  <img src="http://placehold.it/100x100">
</div>

＆＃13;

Answer 2

您可以使用border-radius like，

div {
    border: 3px solid;
    border-radius: 30px;
}

倒角/圆角图像HTML

2 个答案: