IT课程 CSS基础 024_边框、轮廓、阴影

边框

CSS 中的边框（Borders）是用于在元素周围创建可视化边界的重要样式属性。

边框属性

• border-width: 设置边框的宽度。
• border-style: 设置边框的样式（solid：实线、dotted：虚线、dashed：点线、double：双线、groove：凹槽、ridge：凸起、inset：凹陷、outset：凸出、none：无边框）。
• border-color: 设置边框的颜色。

示例：

.example1 {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    width: 200px;
    height: 200px;
}
.example2 {
    border: 2px solid #333;
    /* 简写属性 */
    width: 200px;
    height: 200px;
}

<div class="example1"></div>
<br>
<div class="example2"></div>

效果：

边框方向

border-top, border-right, border-bottom, border-left: 分别设置顶部、右侧、底部、左侧的边框。

示例：

.example1 {
    border-top: 2px solid #333;
    border-right: 1px dashed #555;
    border-bottom: 3px solid #777;
    border-left: 1px dotted #999;
    width: 200px;
    height: 200px;
}

    <div class="example1"></div>

效果：

圆角

border-radius: 设置边框的圆角。

示例：

.example1 {
    border-radius: 10px;
    /* 所有角都有10px的圆角 */
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
.example2 {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 40px;
    border: 1px solid black;
    width: 200px;
    height: 200px;
}

<div class="example1"></div>
<br>
<div class="example2"></div>

效果：

阴影

CSS中的阴影（box-shadow）是一种在元素周围创建阴影效果的属性。阴影可以用于增强元素的立体感，使页面看起来更加生动。通过在 box-shadow 值前添加 inset 关键字，可以创建内部阴影。可以使用逗号分隔多个 box-shadow 值来添加多个阴影效果。如果元素有圆角，阴影将相应地应用在圆角上。

阴影可以有多个参数，包括水平偏移、垂直偏移、模糊半径、阴影颜色等。

• 水平偏移（horizontal offset）：阴影水平方向的偏移量。
• 垂直偏移（vertical offset）：阴影垂直方向的偏移量。
• 模糊半径（blur radius）：阴影的模糊程度。
• 扩散半径（spread radius）：阴影的尺寸，正值扩大，负值缩小。
• 阴影颜色：阴影的颜色。

示例：

.base {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
.example1 {
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
}
.example2 {
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

<div class="base example1"></div>
<br>
    <div class="base example2"></div>

效果：

轮廓

CSS中的轮廓（outline）是一个可以添加到元素周围的可见边框，通常用于强调元素的外部边缘。轮廓不会影响布局，不会改变元素的大小或位置。轮廓通常用于表单元素的焦点可视化、链接的活动状态等。

• outline-color：设置轮廓的颜色。
• outline-style：设置轮廓的样式。
• outline-width：设置轮廓的宽度。
• outline-offset：设置轮廓偏移属性，轮廓与边框的间隔。

示例：

.example1 {
    outline-color: blue;
    outline-style: dotted;
    outline-width: 2px;
    outline-offset: 5px;
    border: 1px solid red;
    width: 200px;
    height: 200px;
}
.example2 {
    outline: 2px solid green;
    border: 1px solid red;
    width: 200px;
    height: 200px;
}

<div class="example1"></div>
<br>
<div class="example2"></div>

效果：