使用 3d 变换，我们可以将元素移动到 x 轴、y 轴和 z 轴。以下是 CSS3 3D 变换的一些方法：序号 值和描述 1 matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) 用于使用矩阵的 16 个值来变换元素 2 translate3d(x, y, z) 用于使用 x 轴、y 轴和 z 轴来变换元素 3 translateX(x) 用于使用 x 轴来变换元素 4 translateY(y) 用于使用 y 轴来变换元素 ... 阅读更多

段落可以使用 HTML 和 CSS 很容易地在网页上添加边框。这样，要为段落添加边框，我们也可以使用图像。要在 CSS 中创建边框图像，请使用 border-image 属性。以下是 border-image 属性的语法：语法 border-image: value; value 可以是：border-image-source - 设置为边框的图像源 border-image-slice - 切割边框图像。图像在以下部分被切割：四个角、四条边和中间。border-image-width - 边框图像的宽度 border-image-outset - ... 阅读更多

元素的圆角使用 CSS3 中的 border-radius 属性在网页上设置。您可以使用以下方法设置圆角的形状：length - 以长度单位设置角的形状。默认值为 0。阅读有关长度单位的信息 % - 以百分比设置形状 让我们看两个示例，分别为容器和图像设置圆角。创建圆角 这里有两个 div，用于显示普通容器和带有圆角的容器之间的区别：圆角 默认角 示例 ... 阅读更多

transition 简写属性允许我们将 transition-property、transition-duration、transition-timing function 和 transition-delay 作为值指定给 transition 属性在一行中：transition-duration - 指定过渡效果完成需要多少秒或毫秒 transition-property - 效果所作用的属性名称 transition-timing function - 过渡的速度曲线 transition-delay - 以秒为单位设置过渡效果的延迟 请记住，您需要设置效果应用到的 CSS 属性以及持续时间。假设我们将鼠标悬停时形状转换为椭圆形 ... 阅读更多

对于多个过渡，使用 CSS3 transition 属性，这是一个简写属性。它在一行中设置过渡的属性、持续时间、时间和延迟。假设我们更改了宽度和 border-radius 以进行过渡。transition: width 2s, border-radius 2s; 设置容器 div 首先，设置一个父 div：设置过渡 使用 transition 属性为 width 和 border-radius 属性设置过渡。设置的持续时间为 2 秒：.container div { width: 300px; ... 阅读更多

2D 变换用于重新更改元素结构，如平移、旋转、缩放和倾斜。以下是 2D 变换函数中的一些：序号 值和描述 1 matrix(n, n, n, n, n, n) 用于使用六个值定义矩阵变换 2 translate(x, y) 用于沿 x 轴和 y 轴变换元素 3 skew() 沿 X 轴和 Y 轴倾斜元素 4 skewX() 沿 X 轴倾斜元素 5 skewY() 沿 Y 轴倾斜元素 6 scale(x, y) 用于更改宽度 ... 阅读更多

要创建 CSS3 盒阴影和文本阴影效果，请分别使用 box-shadow 和 text-shadow 属性。让我们用示例逐一了解它们。文本阴影 要向文本添加阴影，请使用 text-shadow 属性。让我们看看语法：text-shadow: value 上述值可以是以下值：h-shadow - 设置水平阴影的位置。v-shadow - 设置垂直阴影的位置。blur-radius - 设置模糊半径。color - 设置阴影的颜色。创建文本阴影 让我们看一个创建文本阴影的示例： ... 阅读更多

线性渐变用于以线性格式（如从上到下）排列两种或多种颜色。要添加透明度，请使用 RGBA() 函数并定义颜色停止点。至少应提及两个颜色停止点。让我们首先看看语法。语法 以下是创建线性渐变的语法：background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...); 在上面，dir 是方向，即来自：从左到右 从右到左 对角线 从上到下 线性渐变从右到左开始 以下是设置透明线性渐变的代码 ... 阅读更多

为了更好地控制渐变的方向，请在 background-image 属性的 linear-gradient() 方法下定义角度。这提供了对渐变方向的更多控制：值 0deg 是“到顶部”方向 值 90deg 是“到右侧”方向 值 180deg 是“到底部”方向 以下是语法：background-image: linear-gradient(angle, color-stop1, color-stop2); 设置线性渐变的角度 以下是使用角度在 CSS 中设置线性渐变方向的代码。.linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); } ... 阅读更多

渐变显示两种或多种颜色的组合。线性渐变用于以线性格式（如从上到下）排列两种或多种颜色。径向渐变出现在中心。线性渐变 线性渐变使用 background-image 属性设置。角度设置为第一个参数。这是一个示例：body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div ... 阅读更多