如何使用 CSS 在 div 元素内放置边框

答案：使用 CSS `box-shadow` 属性

如果您想在矩形框内放置或绘制边框，有一个非常简单的解决方案 — 只需使用 CSS outline 属性而不是 border 并使用带有负值的 CSS3 outline-offset 属性将其移动到元素的框内。

但是，此解决方案不适用于圆角元素。但是，您仍然可以使用 box-shadow 属性在圆形框或带圆角的元素内绘制边框，并使用一些小技巧。

让我们看一下以下示例，以了解其基本工作原理：

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Border inside DIV Element</title>
<style>
    .box {
        width: 180px;
        height: 180px;
        background: black;
        margin: 20px 50px;
    }
    .circle {
        border-radius: 50%;
    }
    .inner-border {
        border: 20px solid black;
        box-shadow: inset 0px 0px 0px 10px red;
        box-sizing: border-box; /* 在元素的宽度和高度中包含填充和边框 */
    }
    /* CSS3 solution only for rectangular shape */
    .inner-outline {
        outline: 10px solid red;
        outline-offset: -30px;
    }
</style>
</head> 
<body>
    <h2>Border inside Rectangular and Circular Shape</h2>
    <div class="box circle inner-border"></div>
    <div class="box inner-border"></div>
    <hr>
    <h2>Outline Inside Rectangular Shape</h2>
    <div class="box inner-outline"></div>
</body>
</html>

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

如何使用 CSS 在 div 元素内放置边框

答案：使用 CSS box-shadow 属性

示例

FAQ 相关问题解答

关于我们

联系方式

互动工具

答案：使用 CSS `box-shadow` 属性