为啥给 div 一个背景颜色在其边框上绘制？

Posted 2023-04-01

【中文标题】为啥给 div 一个背景颜色在其边框上绘制？

【英文标题】：Why does giving a div a background color paint over its border?为什么给 div 一个背景颜色在其边框上绘制？

【发布时间】：2021-01-23 23:20:55

【问题描述】：

目前，我可以在 div 周围设置边框，也可以在 div 内部设置背景颜色，但不能同时使用。通过在代码隐藏中添加边框，如下所示：

gadsDiv.Attributes.Add("style", "border: 2px solid blue");

...我得到了边框：

但如果我也想要背景颜色：

gadsDiv.Attributes.Add("style", "background-color: lightyellow");

...我得到了背景颜色，但失去了边框：

为什么我不能有我的背景颜色和边框呢？

【参考方案1】：

gadsDiv.Attributes.Add() 将覆盖之前分配的属性。

试试这个：

gadsDiv.Attributes.Add("style", "background-color: lightyellow; border: 2px solid blue");

【参考方案2】：

看起来您正在覆盖第一个样式。而是将所有样式添加到 @abney317 所说的相同属性。 CSS 从不隐藏背景颜色的边框，除非它是相同的颜色。这是具有相同颜色和不同颜色的背景和边框的示例。 使用边框，您可以添加内边框。您还可以使用 outline 属性添加外边框。

#box1
width: 200px;
height: 200px;
background: red;
border-top: 5px solid red;
border-left: 5px solid blue;
outline: 5px solid green;

<div id="box1">
</div>
<div id="box2">
</div>