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

时间：2024-10-01 12:10:03

目录

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.****img.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——已经缺氧的【H2O2】

相关文章