当前位置：首页 > article >正文

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

article 2024/10/3 19:48:38

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:
}

其中定义字体如何拉伸有下面几种属性值，感兴趣的可以自己填入查看效果：