目录
CSS3入门
前言
准备工作
边框属性的扩充
border-image
盒子阴影
背景属性
渐变属性
线性渐变
径向渐变
重复渐变
案例
自定义字体
预告和回顾
后话
CSS3入门
前言
本系列博客主要介绍CSS相关的知识点。
从本期开始，CSS的知识从CSS的2.x时代进入3.0时代。这一期主要介绍以下几个CSS3的知识点：
- 边框属性扩充
- 盒子阴影
- 背景属性扩充
- 渐变
- 自定义字体
可能有些地方说的不太准确，请见谅。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
边框属性的扩充
在学习CSS2的时候，我们知道设置边框的属性为border。
CSS3沿袭了CSS2的全部常用的边框的使用方式，并拓展了一些新的内容。常见的新用法有border-radius和border-image。
在之前的内容中，我已经展开来说过border-radius属性，感兴趣的可以看这一篇博客。
border-image
这个属性用于将图片设置为边框，该属性为简写属性，简写下面的五个属性的值：
border-image-source
用于引用设置为边框的图片，使用下面的CSS代码引入：
border-image-source: url("你的路径");这里给出案例用图：
border-image-slice
该属性用于设置图像边界向内偏移。可以填像素值或者%。其中%是相对于被设置为边界的图片而言的。
border-image-width
该属性用于设置图像边界的宽度。可以设置数字，为border-width属性的倍数；也可以设置%。
border-image-outset
该属性用于指定边框外部绘制图像的面积。可以设置px，rem以及em，也可以设置倍数。
border-image-repeat
该属性用于设置图像边界是否重复，包含下面四种值：
| 属性值 | 含义 |
|---|---|
| treth | 默认值，拉伸图像来填充边框区域（四角图案不变） |
| repeat | 平铺图像四条边的图案，四角图案不变 |
| round | 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域 |
| space | 类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围 |
盒子阴影
为盒子设置阴影的属性为box-shadow。它有以下几个属性值：
| 属性值名 | 含义 | 值 |
|---|---|---|
| color | 阴影颜色 | 颜色值、十六进制、rgba |
| h-shadow | 水平阴影位置 必须 | 数值，可以为负 |
| v-shadow | 垂直阴影位置 必须 | 数值，可以为负 |
| blur | 模糊范围/距离 | 数值 |
| spread | 阴影的大小 | 数值 |
| inset | 内侧阴影 |
可以分别设置各个方向的阴影，使用逗号分隔各组属性。
背景属性
background-size
该属性用于设置背景图像的尺寸，可以使用像素值，%，rem和em。
background-origin
该属性用于定义背景图的定位区域，有三种填充的方式：
| 方式 | 位置 |
|---|---|
| padding-box | 默认 从padding开始填充 |
| border-box | 从边框开始填充 |
| content-box | 从内容区域开始填充 |
渐变属性
该属性基于background-image属性进行扩充，主要有线性渐变和径向渐变，以及相应的重复渐变方式。
线性渐变
该属性的属性名为：linear-gradient，从点到点沿线渐变。
使用方法如下：
background-image: linear-gradient(direction/angle,color-stop1,color-stop2,...) 其中，方向和角度只需要选择其中之一填写即可：
- direction：方向 默认自上而下 to bottom/left /right/top
- angle：角度 单位是deg
径向渐变
该属性的属性名为：radial-gradient，从点到四周从中心开始向外渐变。
使用方法如下：
background-image: radial-gradient(shape size at position,start-color,...last-color)- shape：定义形状 circle(圆形) ellipse(默认 椭圆)
- size：大小（半径长度）
- position：位置 top bottom left right center（默认）
填在size的位置：
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
重复渐变
在上述两种渐变之前加上repeating-，可以设置重复渐变。 用于渐变设置的颜色未填充满半径时重复此前的颜色组合。
案例
利用渐变，我们可以制作如下的彩虹案例：
使用的CSS代码如下：
.box {
width: 1000px;
height: 500px;
border: 20px solid skyblue;
margin: 100px auto;
background-image: radial-gradient(circle farthest-corner at bottom,transparent 30%,#9669AD 35%,#64A3D7 40%,#84D1F0 45%,#B7CF2E 50%,#F1E902 55%,#FAAE16 60%,#EB501E 65%,transparent 70%);
}自定义字体
有时，系统自带的字体不能满足我们制作网页时的多种需求，这时就需要引入外部的字体。
有时，我们遇到的一些图标，比如阿里巴巴矢量图标库（iconfont）中的图标，也是自定义字体。
引入方式为：
/*定义自定义字体*/
@font-face{
/*必需 定义字体名称*/
font-family:
/*必需 定义字体的路径*/
src:
/*设置字体的样式*/
font-style:
/*设置字体的粗细*/
font-weight:
/*设置字体如何拉伸*/
font-stretch:
}其中定义字体如何拉伸有下面几种属性值，感兴趣的可以自己填入查看效果：
- normal （默认）
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
预告和回顾
对网页布局和制作感兴趣的朋友，可以看下面的CSS专栏，里面有很多讲解详尽的案例，当前为第八期：
专栏 | CSS入门
http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——已经缺氧的【H2O2】
