8.1 属性 border
框线是网页设计的重要方面。它们可以突出元素并改善页面的视觉效果。CSS 提供了许多属性来创建和定制框线。我们来看看框线的主要属性，包括简写和完整写法，还有用于指定框线宽度、样式、颜色和圆角的属性。
主要参数
框线的主要参数可以通过不同的属性设置：border-width, border-style 和 border-color。
语法：
element {
border-width: width;
border-style: style;
border-color: color;
}
使用示例：
CSS
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
简写
属性 border 允许在一行中设置框线的所有主要参数（宽度、样式和颜色）。
语法：
element {
border: width style color;
}
CSS
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
HTML
<body>
<div class="border-compact">简写</div>
<div class="border-full">完整写法</div>
</body>
8.2 框线宽度: border-width
属性 border-width 用于设置框线的宽度。可以使用像素 (px)、点 (pt)、百分比 (%) 或关键字 (thin, medium, thick) 来设置宽度。
语法：
element {
border-width: width;
}
示例：
CSS
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
HTML
<body>
<div class="border-thin">细框</div>
<div class="border-medium">中等框</div>
<div class="border-thick">粗框</div>
<div class="border-custom">5px 宽框</div>
</body>
8.3 框线样式: border-style
描述：
属性 border-style 用于设置框线的样式。样式选项包括：
none: 无框线solid: 实线dotted: 点线dashed: 虚线double: 双实线groove: 凹槽ridge: 山脊inset: 内嵌outset: 外凸
语法：
element {
border-style: style;
}
示例：
CSS
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
HTML
<body>
<div class="border-none">无框线</div>
<div class="border-solid">实线</div>
<div class="border-dotted">点线</div>
<div class="border-dashed">虚线</div>
<div class="border-double">双实线</div>
<div class="border-groove">凹槽</div>
<div class="border-ridge">山脊</div>
<div class="border-inset">内嵌</div>
<div class="border-outset">外凸</div>
</body>
8.4 框线颜色: border-color
属性 border-color 设置框线的颜色。颜色可以用多种格式表示：颜色名称，十六进制代码，RGB，RGBA，HSL，HSLA。
语法：
element {
border-color: color;
}
CSS
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
HTML
<body>
<div class="border-red">红色框</div>
<div class="border-blue">蓝色框</div>
<div class="border-green">绿色框</div>
<div class="border-rgba">半透明红色框</div>
</body>
8.5 使用 border-radius 圆角
属性 border-radius 允许你让元素的角变得圆润，创建圆角框线。它可以同时应用于四个角，也可以分开应用于每个角。
语法：
element {
border-radius: radius;
}
值：
- 单个值: 例如，
border-radius: 10px;— 为所有角设置相同的圆角半径 - 两个值: 例如，
border-radius: 10px 20px;— 第一个值用于左上角和右下角，第二个用于右上角和左下角 - 四个值: 例如，
border-radius: 10px 20px 30px 40px;— 分别为左上、右上、右下、左下角设置半径 - 混合值: 可以以百分比形式设置半径，这可以让圆角适应元素的尺寸
示例：
CSS
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
HTML
<body>
<div class="radius-all">所有角的圆角</div>
<div class="radius-top">顶部圆角</div>
<div class="radius-bottom">底部圆角</div>
<div class="radius-mixed">混合圆角</div>
</body>
.radius-all: 为所有角应用相同的圆角半径 (15px).radius-top: 仅为顶部角应用圆角 (20px).radius-bottom: 仅为底部角应用圆角 (25px).radius-mixed: 为每个角应用不同的圆角半径
GO TO FULL VERSION