边框
三种添加边框方法
- border
- outline
- box-shadow
在CSS中，border和outline都可以用来为元素添加围绕内容的装饰线条，但它们之间有一些关键的区别：
Border（边框）
border属性用于在元素的边缘绘制边框。边框是元素盒模型的一部分，这意味着它会直接影响元素的宽度和高度。
- 宽度：
border-width属性控制边框的厚度。 - 样式：
border-style属性定义边框的样式，如solid（实线）、dashed（虚线）、dotted（点线）等。 - 颜色：
border-color属性设置边框的颜色。 - 简写：
border或border: border-width border-style border-color;可以同时设置宽度、样式和颜色。 - 盒模型：边框会占据元素的布局空间，增加元素的总尺寸。
- 定位：边框位于元素的边缘，从元素的
padding区域向外延伸。
border-radius
border-radius 中的百分比值是相对于元素的尺寸而言的，是相对于元素的宽度和高度的较小值。这意味着百分比值会影响元素的最小尺寸（宽度或高度，取较小的那个），从而决定圆角的大小。
例如，如果一个元素的宽度是200px，高度是100px，那么使用 border-radius: 50%; 将会创建一个完美的圆形或椭圆形，因为50%的宽度（100px）和高度（50px）的较小值将被用作圆角的半径。
这里有一个具体的例子：
1.circle {
2 width: 100px;
3 height: 100px;
4 border-radius: 50%; /* 使用百分比创建圆形 */
5 background-color: red;
6}在这个例子中，border-radius: 50%; 意味着元素的每个角的圆角半径是元素宽度或高度的50%，由于宽度和高度相等，所以元素将显示为一个完美的圆形。
如果元素的尺寸不同，百分比将基于宽度和高度中较小的那个尺寸来计算：
1.oval {
2 width: 200px;
3 height: 100px;
4 border-radius: 50%; /* 使用百分比创建椭圆形 */
5 background-color: blue;
6}在这个例子中，border-radius: 50%; 意味着元素的圆角半径是元素高度的50%（50px），因此元素将显示为一个椭圆形，因为宽度大于高度。
Outline（轮廓）
outline属性用于在元素的外围绘制一条线，它不会影响元素的布局。
- 宽度：
outline-width属性控制轮廓的厚度。 - 样式：
outline-style属性定义轮廓的样式，与border-style类似。 - 颜色：
outline-color属性设置轮廓的颜色。 - 简写：
outline或outline: outline-width outline-style outline-color;可以同时设置宽度、样式和颜色。 - 布局：轮廓不占据布局空间，它不会增加元素的总尺寸。
- 定位：轮廓位于元素的外围，它围绕元素的
border和padding区域。
区别总结
- 盒模型影响：
border是盒模型的一部分，而outline不是。 - 性能：
outline通常用于高亮显示或焦点状态，因为它不会影响布局，且性能开销较小。 - 可见性：
outline通常用于表单元素的焦点状态，而border用于日常的布局和设计。 - 可继承性：
outline默认情况下不会被元素内部的元素继承，而border会。
示例代码
1/* 设置边框 */
2.border-box {
3 border: 2px solid red;
4}
5
6/* 设置轮廓 */
7.outline-box {
8 outline: 2px dashed blue;
9}border-style 属性定义了边框样式
solid: 实线
dotted: 点线
dashed: 虚线
double: 双线
groove: 凹槽
ridge: 脊线
inset: 嵌入
outset: 凸起
none: 无边框
border-radius: 圆角半径
border-radius 是 CSS 中的一个属性，用于创建圆角边框效果。通过为元素的边框添加圆角，可以给用户界面带来更加柔和和现代的视觉效果。border-radius 可以应用于任何块级元素，包括 div、img、input 等。
基本用法 border-radius 属性可以设置为一个或多个值，用于定义元素四个角的圆角半径。这些值可以是长度值（如像素、百分比等）或使用 calc() 函数进行计算。
box-shadow
box-shadow 用于在元素的框架上添加阴影效果。它可以为元素添加一个或多个阴影，增强视觉效果，使元素看起来更加立体或突出。box-shadow 属性可以包含多个值，分别对应阴影的位置、模糊度、扩散度和颜色。
基本语法
box-shadow 的基本语法如下：
1box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色];- 水平偏移：阴影相对于元素在水平方向上的偏移量。正值将阴影向右移动，负值向左移动。
- 垂直偏移：阴影相对于元素在垂直方向上的偏移量。正值将阴影向下移动，负值向上移动。
- 模糊半径：阴影的模糊程度。值越大，阴影越模糊。
- 扩散半径（可选）：阴影的扩散范围。正值使阴影扩散，负值使阴影收缩。
- 颜色：阴影的颜色。
示例
1/* 添加一个简单的阴影 */
2.shadow-box {
3 box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
4}这个例子中，阴影向右偏移5px，向下偏移5px，模糊半径为5px，没有扩散半径（因此设置为0px），颜色为半透明的黑色。
多个阴影
也可以为一个元素添加多个阴影：
1.multi-shadows {
2 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2),
3 -1px -1px 2px rgba(255, 255, 255, 0.5);
4}这里，.multi-shadows 类应用了两个阴影效果：一个轻微偏移的深色阴影和一个轻微偏移的白色阴影。
内阴影
box-shadow 还可以创建内阴影效果，通过在水平偏移和垂直偏移前添加 inset 关键字：
1.inset-shadow {
2 box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
3}这个例子创建了一个内阴影，它看起来像是元素内部的阴影，而不是外部的。
使用 spread-radius
spread-radius 可以控制阴影的扩散范围，使阴影看起来更大或更小：
1.spread-shadow {
2 box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, 0.3);
3}这里，阴影的扩散半径为10px，使得阴影比原始元素更大。
box-shadow 是一个非常强大的CSS属性，可以用来创造各种视觉效果，增强网页的美观性和交互性。