Question

我想对特定图像使用边框半径，我在CSS中如何做到这一点？当我尝试使用border radius属性时，它将它应用于该页面上的所有图像，当我通过课程使用它时，它不起作用。请看一下这段代码并告诉我。

＆＃13;

#radiusimage{
  border-radius: 25px;
}

＆＃13;

<img class="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

＆＃13;

Answer 1

使用class HTML属性时，您需要在CSS中使用.

.radiusimage {
    border-radius: 25px;
}

<img class="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

如果您想在CSS中使用#，请将您的HTML属性更改为id

#radiusimage {
    border-radius: 25px;
}

<img id="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

Answer 2

由于您的img标记没有radiusimage的ID，因此尝试在radiusimage上使用.而不是#，它指定了一个类。

Answer 3

你的css将radiusimage定义为id，并将HTML用作类..

#radiusimage{
  border-radius: 25px;
}

<img id="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

或者如果你想让我们像css一样在类中定义类：

.radiusimage{
  border-radius: 25px;
}

<img class="radiusimage" src="https://bestforandroid.com/wp-content/uploads/2016/10/music-apps-1-300x150.png" alt="music-apps" width="300" height="170" />

Answer 4

您似乎在班级(#)

的位置使用了(.)

这是解决方案 https://jsfiddle.net/itsselvam/f1j4y8gr/

Answer 5

如果你想将它应用于许多图像，那么你应该使用一个类，但如果需要的话，可以将它作为另一个类添加，并记住你的唯一ID

所以img id =“apple”class =“green borderradius” 将看起来与img id =“apple”class =“green”不同，例如

请参阅fiddle或摘要

.green {
  background-color: green;
}

.yellow {
  background-color: yellow
}

.radius {
  border-radius: 25px;
}

img {
  background-size: 50px 50px;
  background-repeat: no-repeat;
}

<img id ="apple" class="yellow radius" src="http://www.hudsonproduce.com/images/fruitimages/apples-fuji.png">

<img id="apple1" class="green radius" src="http://www.hudsonproduce.com/images/fruitimages/apples-fuji.png">

<img id ="apple2" class="green" src="http://www.hudsonproduce.com/images/fruitimages/apples-fuji.png">

如何为特定div设置CSS样式？

5 个答案: