Home > Article > Web Front-end > How to add inner border in css3
How to add inner border in css3
- 王林Original
- 2020-11-19 11:52:562655browse
How to add inner borders in css3: You can add inner borders by using the border attribute and box-sizing attribute, such as [box-sizing:border-box;]. The box-sizing attribute allows certain properties to be defined in a way to fit within a specified area.
The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.
css3 Add inner border
Related properties:
The border property allows you to specify the style and color of an element's border.
The box-sizing property allows you to define certain elements in a way to fit within a specified area.
(Learning video sharing: css video tutorial)
Grammar:
box-sizing: content-box|border-box|inherit:
Attribute value:
content-box This is the behavior of width and height specified by CSS2.1. Specifying the element's width and height (min/max properties) applies to the box's width and height. The element's padding and border layout and drawing specify the width and height except
border-box Specify the width and height (minimum/maximum attributes) to determine the element border. That is, specifying the width and height of an element includes padding and border. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.
inherit Specifies the value of the box-sizing attribute, which should be inherited from the parent element
Code implementation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html>Achievement effect ：
Related recommendations: CSS tutorial
The above is the detailed content of How to add inner border in css3. For more information, please follow other related articles on the PHP Chinese website!