在 CSS 中设置内边框
-
在 CSS 中使用
box-sizing
属性设置内边框 -
在 CSS 中使用
box-shadow
属性设置内边框 -
在 CSS 中使用
outline
和outline-offset
属性设置内边框
在本文中,我们将介绍在 CSS 中设置容器内部边框的方法。容器内部的边界称为内边界。
在 CSS 中使用 box-sizing
属性设置内边框
当我们为容器内的元素添加边框或内边距时,容器的大小会增加。大小将与初始大小不同。为了消除这个问题,我们可以给容器添加一个内边框。
内边框是在边框和轮廓属性或元素之间创建的空间。我们可以对表格内容、图像以及段落和标题的文本应用内边框。内边框可以是矩形、正方形、圆形等任何形状。
内边框不会增加容器的大小,预定义的大小将保持不变。我们可以使用 box-sizing
属性在 CSS 中创建一个内边框。将 box-sizing
属性设置为 border-box
将包括容器尺寸内的边框和内边距。
例如,通过将 box-sizing
属性设置为 border-box
来设置 div
的样式。将 div
的高度和宽度设置为 200px
。接下来,创建一个 10px
宽度和 red
颜色的 solid
边框。然后,将 background
属性设置为 green
。
在这里,我们创建了一个尺寸为 200x200 px
的 div
。即使我们添加了 10px
的边框,容器的尺寸也没有改变。边界位于容器内。因此,我们可以使用 box-sizing
属性在 CSS 中设置内边框。
示例代码:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid red;
background: green;
}
<div></div>
在 CSS 中使用 box-shadow
属性设置内边框
实现内边框的另一种方法是使用 box-shadow
CSS 属性。使用该属性,我们可以指定内嵌的阴影,看起来就像一个内边界,而不是一个阴影。
我们可以将 box-shadow
的水平和垂直偏移值设置为前两个值。其他三个值,blur
、spread
和 color
,是可选的。我们可以将扩散半径设置为所需的值以创建阴影。然后,使用 inset
选项会将外部阴影更改为内部阴影。阴影将落在容器内。最后,它看起来像一个内边框。
例如,将 div
的 height
和 width
属性设置为 200px
。将背景颜色设置为绿色。然后,使用 box-shadow
属性并将前三个选项设置为 0px
。设置扩散半径,第四个选项为 10px
。赋予颜色红色并设置 inset
选项。
在这里,我们使用 box-shadow
属性创建了一个宽度为 10px 的内边框。
示例代码:
div {
width:200px;
height:200px;
background-color:green;
box-shadow:0px 0px 0px 10px red inset;
}
<div></div>
在 CSS 中使用 outline
和 outline-offset
属性设置内边框
我们可以使用 CSS 中的 outline
和 outline-offset
属性设置内边框。outline
属性描述了元素的边框大小、边框类型和边框颜色。outline-offset
属性描述了边框和轮廓元素之间的距离或空间。
例如,将 div
的高度和宽度设置为 200px
。给绿色作为背景。接下来,将 outline
设置为 5px solid red
。然后,将 outline-offset
设置为 -5px
。
在这里,outline
属性在容器中创建了一个外边框。使用 outline-offset
属性并将其设置为边框宽度的负值会将外边框更改为内边框。
示例代码:
div {
width: 200px;
height: 200px;
background: green;
outline: 5px solid red;
outline-offset: -5px;
}
<div></div>