创建 HTML
- 使用两个 <div> 元素。
<div>Some text</div> <div>Some text</div>
在此代码中，我们将演示如何使用一些 CSS 属性在 <div> 元素内放置边框。
添加 CSS
- 将 box-sizing 属性设置为“border-box”。
此外，使用 -moz- 和 -webkit- 前缀。
- 将 <div> 的宽度和高度设置为 120px。
- 指定边框和边距属性并添加背景。
- 设置第二个 <div> 的边框。
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 120px;
height: 120px;
border: 20px solid #969696;
background: #d9dbda;
margin: 10px;
}
div+div {
border: 10px solid #969696;
}
现在，让我们看看完整的代码。
在 <div> 元素内放置边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 120px;
height: 120px;
border: 20px solid #969696;
background: #d9dbda;
margin: 10px;
}
div + div {
border: 10px solid #969696;
}
</style>
</head>
<body>
<div>Some text</div>
<div>Some text</div>
</body>
</html>
接下来，看一个例子，我们在 <div> 元素内放置一个边框和一个轮廓。
在 <div> 元素内放置边框和轮廓的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.box {
width: 180px;
height: 180px;
background: #d9dbda;
margin: 20px 50px;
}
.inner-border {
border: 20px solid #d9dbda;
box-shadow: inset 0px 0px 0px 10px #969696;
box-sizing: border-box;
}
.inner-outline {
outline: 10px solid lightblue;
outline-offset: -30px;
}
</style>
</head>
<body>
<h2>Border inside a Div</h2>
<div class="box inner-border"></div>
<h2>Outline Inside a Div</h2>
<div class="box inner-outline"></div>
</body>
</html>
在上面的示例中，我们使用了轮廓属性而不是边框，然后使用轮廓偏移属性（具有负值）将其移动到框内。
日期：2020-06-02 22:15:04 来源：oir作者：oir