我可以在图像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

检查this answer优素福：

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

Answer 3

是，IMG标签是inline-block的元素，但你可以改变它的宽度和高度，像块元素。

喜欢本作例子：

.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; 
    }