特异性和 CSS 边界半径问题

Question

非常菜鸟的问题，但我希望在调整我的一些代码方面得到一些帮助。屏幕上的图像/照片具有弯曲的上角和直的底角。我需要创建一个具有正确特异性的类，以确保所有角都是弯曲的。特别是8px，8px，8px，8px。

<img:src="~/media/xxxxx.ashx" alt="xxxx"/>

我会在上面创建一个内联类吗？<img:src="~/media/xxxxx.ashx" alt="xxxx"/ **class=img**>

然后添加 CSS 选择器

.img{ border-radius: 8px, 8px, 8px, 8px ]

这可能是一个非常令人困惑的问题，但希望它是有意义的。对不起，如果我是个白痴。

Answer 1

W3Schools在角落有一个非常好的解释和指南。确保使用他们的试试吧！！功能来查看即时更改 让自己熟悉它。

如果你对它感兴趣，还有4个单独的属性可以代替。您可以分别设置其中两个，而无需使用速记。来自W3学校：

提示： 边框半径属性实际上是左上边框半径

、右上角边框半径、右下边框半径和左下边框半径属性的简写属性。

Answer 2

你的代码是错误的。试试这样。内部选择器(，不使用(

.css

.img{ border-radius: 8px 8px 8px 8px }

Answer 3

属性的相关列表。

解决方案 1：

.img{
border-top-left-radius: 50px 20px; // for top and left
border-top-right-radius: 50px 20px; // for top and right
border-bottom-left-radius: 8px; // for both
border-bottom-right-radius: 8px; // for both
}

解决方案 2：

.img{
border-radius: 8px 8px 8px 8px; // for all in seperate 
}

解决方案 3：

.img{
border-radius: 8px; // for all at once
}

Answer 4

首先不要说对不起。有疑问或问题是可以的。最好的事情是你愿意提出问题。每个人都面临着问题。

现在来到你的问题，你可以在下面的CSS下使用曲线形状的顶角，底部将是直的。

---

img.img{border-radius:8px 8px 0 0}

---

让我向您介绍边界半径的工作原理。{8px(左上( 8px(右上( 0(右下( 0(左下(}

它的工作方式与所有其他CSS属性几乎没有区别

为了具体起见，我添加了img作为元素，即img.img 如果有，可以添加任何其他父类。即.parentClass img.img{8px 8px 0 0}

Answer 5

您可以通过四种方式编写 CSS 边框半径属性

img{
border-radius: 8px 8x 8x 8x; 
}

或

img{
border-radius: 8px;
}  

或

img{
border-radius: 8px 8px 8px;
}

最后

img{
border-radius: 8px 8px;
}

Answer 6

有愚蠢的问题没关系。当你提出问题时，你会学到新的东西。

这是您问题的答案。我试图让它变得简单。

.HTML：

---

<img src="your image url ">

.CSS：

---

.img{
border-radius: 8px; // for all corner 

}

希望它能解决您的问题。

Answer 7

如果你想在所有角落都有边框半径，那么使用border-radius:8px;，如果你想要特定的一侧，那么你需要使用border-radius: top right bottom left;如果你想在盒子内制作框和图像，图像和div都是弯曲的角，那么你需要在下面使用HTML和CSS。

<div classs="box"><img src="xyz" alt="" /></div>

这是 css ：

.box{border-radius:8px;}
.box img{ border-radius:8px;}