---
title: "IT课程 CSS基础 024_边框、轮廓、阴影"
date: 2024-01-30T22:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "hello css", "css基础", "css边框", "css轮廓", "css阴影"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-024/
author: 赵健
---
### 边框
CSS 中的边框（Borders）是用于在元素周围创建可视化边界的重要样式属性。
##### 边框属性
- `border-width`: 设置边框的宽度。
- `border-style`: 设置边框的样式（solid：实线、dotted：虚线、dashed：点线、double：双线、groove：凹槽、ridge：凸起、inset：凹陷、outset：凸出、none：无边框）。
- `border-color`: 设置边框的颜色。
示例：
```css
.example1 {
border-width: 2px;
border-style: solid;
border-color: #333;
width: 200px;
height: 200px;
}
.example2 {
border: 2px solid #333;
/* 简写属性 */
width: 200px;
height: 200px;
}
```
```html
```
效果：
##### 边框方向
`border-top`, `border-right`, `border-bottom`, `border-left`: 分别设置顶部、右侧、底部、左侧的边框。
示例：
```css
.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;
}
```
```html
```
效果：
##### 圆角
`border-radius`: 设置边框的圆角。
示例：
```css
.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;
}
```
```html
```
效果：
##### 阴影
CSS中的阴影（box-shadow）是一种在元素周围创建阴影效果的属性。阴影可以用于增强元素的立体感，使页面看起来更加生动。通过在 `box-shadow` 值前添加 `inset` 关键字，可以创建内部阴影。可以使用逗号分隔多个 `box-shadow` 值来添加多个阴影效果。如果元素有圆角，阴影将相应地应用在圆角上。
阴影可以有多个参数，包括水平偏移、垂直偏移、模糊半径、阴影颜色等。
- 水平偏移（horizontal offset）：阴影水平方向的偏移量。
- 垂直偏移（vertical offset）：阴影垂直方向的偏移量。
- 模糊半径（blur radius）：阴影的模糊程度。
- 扩散半径（spread radius）：阴影的尺寸，正值扩大，负值缩小。
- 阴影颜色：阴影的颜色。
示例：
```css
.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);
}
```
```html
```
效果：
##### 轮廓
CSS中的轮廓（outline）是一个可以添加到元素周围的可见边框，通常用于强调元素的外部边缘。轮廓不会影响布局，不会改变元素的大小或位置。轮廓通常用于表单元素的焦点可视化、链接的活动状态等。
- outline-color：设置轮廓的颜色。
- outline-style：设置轮廓的样式。
- outline-width：设置轮廓的宽度。
- outline-offset：设置轮廓偏移属性，轮廓与边框的间隔。
示例：
```css
.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;
}
```
```html
```
效果：
