圆角图像或边界半径100％？

Question

我对页面上的圆角元素有疑问。例如，我有一个不圆的小徽标，我想把它放在圆形背景（120x120）。像这样制作div更好：

border-radius: 100%;
background-color: red;
background-image: url('logo.png');
background-position: center;

或者仅为例如创建图像。辫形？

Answer 1

如果您将来要在圆形背景上使用徽标（例如传单，电子邮件等），可能更容易在gimp或替代品中创建徽标版本，因此可以在任何地方快速使用

如果不是真的只是个人偏好，每个都有优点和缺点。

border-radius解决方案

• 如果您想使用媒体查询，可以删除某些屏幕上的背景
• 更快实现。
• 背景尺寸，颜色和半径可以在以后轻松更改。
• 半径在任何显示器上都保持高质量/分辨率。

图片解决方案

• 更好的浏览器支持。
• 可在将来的出版物中使用。

Answer 2

两种解决方案：

1. 使包含图像的div（背景div）具有边框半径，并使div中的图像宽度为100％。

                                  

.background{
 border-radius: 5px;
 background-color: red;
 background-image: url('logo.png');
 background-position: center;
 width: 100px;
 height: 100px;
}

.img{
 width: 100%; 
 height: 100%;
}

1. 将图像作为独立的边框半径

                          

   .background{
    width: 200px;
    height: 200px;
   }
   
   .img{
    border-radius: 5px;
   }