我可以在图像CSS上使用border-radious吗？

Question

我可以在CSS中的图片上使用display:block;和border-radius吗？这与CSS原则相反吗？

Answer 1

是的，你可以。 ：）

您可以轻松地为图像提供您喜欢的任何数字的border-radius。
50％或更多将是圆形图像。您也可以使用px。

例如：

你的html文档中有一个图像：

<img id="image" src="Your source">

在您的css文件中，您只需写下：

#image {
    border-radius: 50px; <-- example number
}

Answer 2

通过yusuf检查this answer：

.img-border{
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border:3px solid red;
}

Answer 3

是的，img标签是内联块元素，但您可以像块元素一样更改其宽度和高度。

就像这样：

    .img-circular{
    width: 200px;
    height: 200px;
    background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
    background-size: cover;
    display: block;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    }