CSS-为什么这不起作用？

Question

我有一个CSS类：

.ImageBorder
{
border-style:solid; border-color:Black;
} 

然后我将CSS Class设置为asp.net Image：

<asp:Image ID="Image3" runat="server" Height="150px" 
                ImageUrl="~/Photos/defaultA.jpg" CssClass="ImageBorder"  />

但它不起作用。如果我将图像放在div标签然后设置divs css类，它会工作，但我宁愿不这样做？是什么给了什么？

Answer 1

尝试给边框一个宽度：

border: 1px solid black;

Answer 2

如其他答案所述，您应指定边框宽度。但是，您可能会遇到额外的“陷阱”：asp图像可能具有“border-width：0”内联样式。在这种情况下，您的规则需要！important声明来覆盖它：

.ImageBorder
{
border: 1px solid black !important;
}

！important声明忽略了CSS遵循的正常优先规则。通常，内联样式优先于嵌入式或外部样式表，这些样式表优先于用户代理的样式。一个重要的属性将优先于所有非重要属性，无论它在何处被声明。

然而，使用！important会导致一些挫败感。假设您想要一个与ImageBorder图像具有相同质量的图像，但宽度为100.您可能会写

<img src="superBorderedImage.png" class="ImageBorder" style="border-width:100"/>

......但这不起作用。您非常重视ImageBorder图像的宽度为1，因此您的“超边框图像”将没有特殊的粗边框。因此，只有当您确定以后在特殊情况下不需要覆盖它时，才应使用！important。

Answer 3

正如David所说，你没有为边框指定任何宽度，这意味着它没有宽度，因此你看不到它。

您可以使用简写：

.ImageBorder
{
    border: 1px solid black;
}

或简写方式：

.ImageBorder
{
    border-style: solid;
    border-color: Black;
    border-width: 1px;
}