小知识，大挑战！ 本文是参与“程序员必备知识”创作活动。
CSS 中的袋模型 根据袋模型的概念和组件，相应的 CSS 属性如下： 设置袋模型的大小 默认情况下，元素的袋模型的大小刚好足以容纳其内容（文字、图片或视频等），并会根据其内容而变化。 其实还可以通过CSS的width和height属性来设置包包模型最终显示的长度和高度，从而改变包包模型的大小。 事实上，包包模型的宽度和高度属性有不止一个值。 bag 阴影的 CSSbox-shadow 属性用于设置 HTML 元素的 bag 模型边框的阴影效果。 该属性的工作原理与text-shadow属性类似。 。 box-shadow属性的句子结构如下：
selector {
box-shadow: color offset-x offet-y blur-raduis spread-radius;
}
上述句子结构中具体值的含义如下： border of bag即bag模型的边框 border是CSS bag模型的重要组成部分。 简单来说，CSS提供了border属性来表示边框。 但在实际应用中，框架的复杂程度远不止于此。 因为CSS3版本给边框添加了很多属性，目前的边框可以定义为以下功能： border 属性 CSSborder属性用于设置包模型的边框，该属性的值有3个值，即长度、款式和颜色。 该属性的句子结构如下：
border: [border-width || border-style || border-color] ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框的样式</title>
<style>
div {
width: 300px;
height: 200px;
border-width: 10px;
border-color: lightsalmon;
/* solid表示实线 */
border-top-style: solid;
/* double表示双实线 */
border-right-style: double;
/* dashed表示线状虚线 */
border-bottom-style: dashed;
/* dotted表示点状虚线 */
border-left-style: dotted;
/* border-style: solid double dashed dotted; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
不仅可以通过代表四个方向的属性来设置边框长度，还可以通过设置边框的1到4的值来分别设置上、右、下、左四个方向的边框间距-width 属性。 详细内容如下： 注意：设置边框样式和边框颜色时，效果与边框宽度类别填写4个值时类似。 如上图结果所示，我们可以看到css3盒子模型，通过CSSborder-color属性设置元素的边框颜色，会同时设置上、右、下、左四个方向的边框颜色。 其实border-color属性也可以定义为四个方向的属性，如下：不仅可以通过代表四个方向的属性来设置边框颜色css3盒子模型，还可以通过设置border-color的1到4属性值分别设置上、右、下、左方向的边框颜色。 具体如下： border-style属性的替代值，即用于描述边框样式的关键字，如下表所示：
CSSborder-style属性用于设置元素的边框样式，上、右、下、左四个方向的边框样式会一起设置。 其实border-style属性也可以定义为四个方向的属性如下： CSS border-style属性用于设置元素的边框样式，上、右、下的边框样式和左方向将设置在一起。 事实上，border-style属性还可以定义为四个方向的属性，如下：不仅可以通过指示四个方向的属性来设置边框样式，还可以通过设置border-的1到4来设置边框样式。 style 属性值分别设置上、右、下、左四个方向的边框样式。 具体如下： 边框圆角 CSS3版本增加了border-radius属性来设置边框的圆角。 如果使用一个直径，则确定矩形，如果使用两个直径，则确定椭圆形。 矩形或椭圆与边框相交会产生圆角效果。 如右图所示：
border-radius属性的值表示与边框相交的矩形的直径或椭圆的长径和短径。 句子结构如下：
border-radius: radius;
border-radius: horizontal-radius / vertical-radius;
border-radius属性一旦设置了边框的圆角效果，就会同时将四个角设置为圆角。 CSS3还提供了将这4个角分别设置为圆角效果的形式，如下图： 不仅可以通过指示4个角的属性来设置边框圆角效果，还可以通过设置border-radius属性从1开始为4个值分别设置4个角的边框圆角效果。 具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框的圆角</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box1 {
border-radius: 10px;
}
.box2 {
border-radius: 20px / 10px;
}
.box3 {
width: 100px;
height: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<br>
<br>
<br>
<br>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
发表评论