【H2O2|全栈】关于CSS（8）CSS3扩充了哪些新鲜的东西？

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阴影颜色颜色值、十六进制、rgbah-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】