圆角属性

border-radius：可以是长度值、百分比值、计算值calc()、也可以是：

inherit：从父元素继承圆角大小；

initial：使用默认的圆角大小；

unset：取消所有圆角设置。

设置值的时候要注意，当设置四个值时，从左上角top-left开始顺时针对应。

阴影属性

box-shadow 属性用于创建元素的阴影效果，它可以接受多个值来指定阴影的位置、大小、颜色和模糊半径等属性。一般设置horizontal-offset，vertical-offset以及颜色。

css 复制代码

box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius]
  [color] [inset];

如果只给出两个值，那么这两个值将会被当作 <offset-x><offset-y> 来解释。

如果给出了第三个值，那么第三个值将会被当作<blur-radius>解释。

如果给出了第四个值，那么第四个值将会被当作<spread-radius>来解释。

horizontal-offset：阴影的水平偏移量，可以是正数（表示向右偏移）或负数（表示向左偏移），默认值为 0；

vertical-offset：阴影的垂直偏移量，可以是正数（表示向下偏移）或负数（表示向上偏移），默认值为 0；

blur-radius：阴影的模糊半径，可以是一个长度值（如 px、em 等单位），表示模糊的程度，值越大越模糊，默认值为 0；

spread-radius：阴影的扩散半径，可以是一个长度值（如 px、em 等单位），表示阴影的大小，值越大阴影越大，默认值为 0；

【可选值】color：阴影的颜色，可以是一个颜色值或关键字值，表示阴影的颜色，默认值为黑色；

【可选值】inset：表示阴影是否为内阴影（即在元素内部），默认为外阴影（即在元素外部）

css 复制代码

/* 创建一个红色、模糊半径为5px、大小为10px的外阴影 */
box-shadow: 0px 0px 5px 10px red;

/* 创建一个白色、模糊半径为0px、大小为10px的内阴影 */
box-shadow: inset 0px 0px 0px 10px white;

css 复制代码

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

渐变属性 CSS gradient

linear-gradient 和 radial-gradient 是两个常用的渐变属性。

linear-gradient 线性渐变

css 复制代码

background: linear-gradient([direction], color-stop1, color-stop2, ...);

direction表示渐变的方向，可以使用关键字（如to top、to bottom、to left、to right）或角度值（如45deg、90deg等）。

color-stop表示渐变的颜色节点，可以使用颜色值或者表示颜色值的百分比值。

一些示例：

css 复制代码

/* 创建一个从上到下的线性渐变 */
background: linear-gradient(to bottom, #ffffff, #000000);

/* 创建一个从左上到右下的线性渐变 */
background: linear-gradient(45deg, #ffffff, #000000);

radial-gradient 圆心渐变

radial-gradient属性用于创建径向渐变效果，它能够在指定的中心点周围逐渐改变颜色。

css 复制代码

background: radial-gradient(
  [shape] [size] at [position],
  color-stop1,
  color-stop2,
  ...
);

shape表示渐变的形状，可以是圆形（circle）或椭圆形（ellipse）。

size表示渐变的大小，可以是长度值（如10px 10px）或百分比值（如50% 50%）。

position表示渐变的中心点位置，可以使用关键字（如center、top left、bottom right等）或者坐标值（如10px 20px）。

过渡属性 Transition

transition-property 设置过渡属性

css 复制代码

transition-property: <property>;

<property> 可以是一个或多个 CSS 属性，用于指定哪些属性的变化需要过渡效果，或者直接设置为all，多个属性之间用逗号分隔。例如：

css 复制代码

transition-property: background-color, color;

这个代码就是说，只有当元素的 background-color 或 color 属性发生变化时，才会触发过渡效果。

要注意的是，transition-property属性需要和其他过渡属性一起使用才能有效果，不能单独使用

transition-duration 设置过渡持续时间

transition-duration属性，用于指定过渡效果的持续时间，即从一个状态过渡到另一个状态所需的时间。单位为s/ms.

css 复制代码

transition-duration: <time>;

同时，transition-duration 属性也支持使用逗号分隔的多个值，用于指定不同状态之间的过渡持续时间。例如：

css 复制代码

transition-duration: 0.2s, 0.5s;

上述代码表示，当元素从默认状态过渡到悬停状态时，过渡效果的持续时间为 0.2 秒；当元素从悬停状态过渡回默认状态时，过渡效果的持续时间为 0.5 秒。

transition-timing-function 设置过渡效果的变化速度

css 复制代码

transition-timing-function: <timing-function>;

预定义的时间曲线函数包括：

ease：默认值，表示先加速后减速；

linear：匀速变化，linear关键字等价于缓动函数 linear(0, 1)；

ease-in：先慢后快，即加速变化；

ease-out：先快后慢，即减速变化；

ease-in-out：先慢后快再慢，即先加速后减速变化；

cubic-bezier()：三次贝塞尔曲线，平滑缓动函数；

steps()：阶跃缓动函数； steps( [, ]? ) 两个参数分别表示构成阶跃函数的等距步数和跳跃何时出现。

例如，该代码表示动画分两步阶梯，第一步发生在动画开始时。

css 复制代码

steps(2, start)

transition-delay 设置延迟时间

transition-delay 用于指定从触发过渡效果到开始过渡的时间间隔。

同样 transition-delay: ;

也可以接收两个时间，同样分别设置从默认状态=>悬停状态悬停状态=>默认状态

当设置好几个时间时，分别对应transition-property 中设置的多个属性。

动画属性

keyframes 关键帧定义

@keyframes 规则是 CSS3 中定义动画的一种方式，它允许开发者定义一系列关键帧，指定动画在不同时间点的状态，从而实现复杂的动画效果。

css 复制代码

@keyframes animation-name {
  from { /* 初始状态 */ }
  to { /* 结束状态 */ }
  /* 或者使用百分比指定中间状态 */
  /* 例如 */
  /* 0% { ... } */
  /* 50% { ... } */
  /* 100% { ... } */
}

animation-name 是动画的名称

例如，定义一个名为my-animation的动画

css 复制代码

@keyframes my-animation {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

上面的代码定义了一个名为 my-animation 的动画，它在开始时不可见（opacity 为 0），中间状态半透明（opacity 为 0.5），结束时完全可见（opacity 为 1）。

animation 属性

animation 属性是 CSS3 中用于定义动画效果的属性，它可以让开发者通过一些简单的声明，实现复杂的动画效果。

css 复制代码

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

animation-name: 动画的名称，与@keyframes中定义的名字对应

animation-duration: 动画的持续时间（s/ms）

animation-timing-function: 动画的速度曲线

animation-delay: 动画的延迟时间

animation-iteration-count: 动画的重复次数（数字or infinite）

animation-direction: 动画的播放方向正向normal 反向reverse 交替正反向alternate 交替反正向alternate-reverse

animation-fill-mode：动画的填充模式，可以是保持最后一帧状态（forwards）、回到初始状态（backwards）、同时使用初始和最后一帧状态（both）或不填充（none）。

animation-play-state：动画的播放状态，可以是运行中（running）或暂停（paused）。

例子，下面的代码定义了一个名为 my-animation 的动画，它在 2 秒钟内从不透明变为透明，并在播放结束后保持最后一帧状态：

css 复制代码

@keyframes my-animation {
  from { opacity: 1; }
  to { opacity: 0; }
}

.my-element {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

变形属性 Transform Properties

CSS3变形属性（Transform Properties）是一组用于改变HTML元素形状、位置和方向的属性。

transform属性

transform 属性是 CSS3 中用于对元素进行变形（transform）的属性，它可以通过一些简单的声明，实现复杂的变形效果。

css 复制代码

transform: transform-function;

transform-function 是一个或多个变形函数，可以使用以下一些函数：

translate(): 平移 ------ 元素沿着某个方向平移

translateX(50px)水平向右平移 translateY(50px)竖直向上平移

rotate(): 旋转 ------ 元素旋转一定角度 rotate(45deg)

scale()比例: 缩放 ------ 元素进行缩放变换 scale(1.5) 放大1.5倍

skew(): 斜切 ------ 元素沿着某个方向进行斜切变换

matrix(): 自定义矩阵变换

3D转换

CSS3 的 3D 变换函数可以通过对元素进行平移、旋转、缩放等变换，来实现 3D 效果，例如立体效果、翻转效果等。下面介绍一些常用的 3D 变换函数：

translate3d()：元素沿着 X 轴、Y 轴和 Z 轴进行平移变换。

transform: translate3d(50px, 100px, 0);

上面的代码将元素沿着 X 轴平移 50 像素，沿着 Y 轴平移 100 像素，沿着 Z 轴平移 0 像素（即不变）。

rotate3d()：元素绕某个点进行 3D 旋转变换。

transform: rotate3d(1, 1, 0, 45deg);

上面的代码将元素绕着 (1, 1, 0) 这个向量旋转 45 度。

scale3d()：元素沿着 X 轴、Y 轴和 Z 轴进行 3D 缩放变换。

transform: scale3d(2, 1.5, 1);

上面的代码将元素沿着 X 轴缩放 2 倍，沿着 Y 轴缩放 1.5 倍，沿着 Z 轴缩放 1 倍（即不变）。

perspective()：设置透视距离，用于实现 3D 效果。

ransform: perspective(1000px) rotateY(45deg);

上面的代码设置透视距离为 1000 像素，然后将元素绕着 Y 轴旋转 45 度，从而实现 3D 翻转效果。

圆角属性应用

border-radius +box-shadow 属性来创建卡片

使元素看起来像是浮起来的，达到卡片的视觉效果.

css 复制代码

.card {
  border-radius: 3px 3px 0 0;
  box-shadow: -5.665px 9.429px 35px 0px rgba(0, 0, 0, 0.2);
}

box-shadow 属性来创建创意装饰

box-shadow 属性创建有装饰性质的效果，通常用于网页设计中的装饰元素或者页面指示器等场景，例如我们为这个卡片头部添加三个小球，让卡片看起来像个窗口.

css 复制代码

.card {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}

使用border-radius 属性制作一个三角形

等腰直角三角形

首先，将元素的宽度和高度设置为 0
将元素的边框宽度设置为想要的三角形的底边
将边框的一个角的颜色设置为想要的颜色，其他三个的颜色设置为transparent透明。这样就能制作一个等腰直角三角形

css 复制代码

.triangle {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #fbeeee #f0e5e5 #f00 #d8cece;
}

等腰三角形

首先，将元素的宽度和高度设置为 0
将元素的某个边框的宽度设置为 0，另一个边框的宽度设置为需要的三角形边长，而另外两个边框的宽度设置为一半的三角形边长，这样元素就变成了一个等边三角形

css 复制代码

.triangle {
    width: 0;
    height: 0;
    border-width: 0 25px 50px 25px;
    border-style: solid;
    border-color: #fbeeee #f0e5e5 #f00 #d8cece;
}

*关于圆角属性与阴影属性的性能问题：当 border-radius 和 box-shadow 的值非常大时，可能会影响页面的性能。这是因为浏览器在渲染时需要计算和绘制复杂的形状，从而增加了页面的渲染时间。为了避免这个问题，可以尽量避免使用过大的值，**或者使用 CSS3 的硬件加速特性（如 transform 和 opacity），将一些计算任务转移到GPU上，**以优化页面的性能。

硬件加速特性

CSS3的硬件加速特性是指利用浏览器硬件加速功能来优化页面性能，特别是在处理涉及复杂图形和动画的情况下。这可以通过使用一些CSS属性来实现，其中最常见的是transform和opacity。

transform： 使用transform属性可以触发硬件加速。这属性主要用于进行2D或3D转换，比如平移、旋转、缩放等。当浏览器检测到页面中使用了transform时，它可能会将这些变换的计算交给GPU来处理，从而加速渲染过程。
css 复制代码
```
.element {
  transform: translateZ(0);
}
```
在上述例子中，translateZ(0)是一种常见的技巧，它没有实际的位移效果，但可以触发硬件加速。
opacity： 使用opacity属性也可以触发硬件加速。通过透明度的变化，浏览器可能会使用硬件加速来更有效地处理元素的渲染。
css 复制代码
```
.element {
  opacity: 0.99; /* 或其他非1的值 */
}
```
同样，这里的关键点是让opacity的值不等于1，即使是极小的变化也足以触发硬件加速。

渐变属性应用

通过linear-gradient属性给背景图像作为一个水平渐变

css 复制代码

.block {
  background-image: linear-gradient(0deg,#2dfbff 0%, #3c96ff 100%);
}

实现波浪形下划线

我们通过伪类在元素下边缘加入下划线效果 .my-error::before
这个伪类宽度和父级元素同宽，高度可以自定义 width: 100%; height: 0.25em;

background 属性用于设置伪元素的背景，其中包括两个渐变效果

css 复制代码

background: linear-gradient(
      135deg,
      transparent,
      transparent 45%,
      #dc3912,
      transparent 55%,
      transparent 100%
    ), 
	linear-gradient(
      45deg,
      transparent,
      transparent 45%,
      #dc3912,
      transparent 55%,
      transparent 100%);

background-size: 0.5em 0.5em; 表示渐变图案的大小为 0.5em * 0.5em，即斜线的间隔大小。
background-repeat: repeat-x, repeat-x; 表示渐变图案在水平方向重复，其中第一个 repeat-x 表示第一个渐变图案（从左下到右上的渐变）水平方向重复，第二个 repeat-x 表示第二个渐变图案（从左上到右下的渐变）水平方向重复

最终的代码：

css 复制代码

.my-error {
  position: relative;
}
.my-error::before {
  content: "";
  position: absolute;
  bottom: -0.125em;
  width: 100%;
  height: 0.25em;
  background: linear-gradient(
      135deg,
      transparent,
      transparent 45%,
      #dc3912,
      transparent 55%,
      transparent 100%
    ), linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent
        55%, transparent 100%);
  background-size: 0.5em 0.5em;
  background-repeat: repeat-x, repeat-x;
}

ps: 伪类元素 ::before 是 CSS 中的一种伪元素，用于在选定元素的内容前插入生成的内容。它允许你通过 CSS 规则在选定元素的内容之前插入一些额外的内容，并且这个额外的内容是通过 CSS 定义的而不是实际存在于文档中的。
在这个波浪下划线案例中，.my-error::before 是一个伪元素 ::before，它会在 .my-error 类的元素内容之前插入生成的内容。

通过渐变实现线性百分比

css 复制代码

.block {
  background: linear-gradient(-90deg, #8ab9ff 50%, #4567b2 50%);
  height: 8px;
}

过渡属性的应用

实现图片自然放大效果

鼠标经过图片的时候放大图片

css 复制代码

.transition-img{
  width: 540px;
  height: 300px;
}
.transition-img img {
  transition-property: all;
  transition-duration: 1s;
  transition-delay: 0s, 1s, 0s;
  width: 450px;
  height: 236px;
}
.transition-img > img:hover {
  width: 540px;
  height: 283px;
  box-shadow: 5px 3px 5px #03040a;
}

transition-delay: 0s, 1s, 0s; 指定了三个延迟时间。对应关系如下：

第一个值（0s）对应 width 属性。

第二个值（1s）对应 height 属性。

第三个值（0s）对应 box-shadow 属性。

实现动态下划波浪线效果

定义一个伪元素 ":after"，用于在链接下面添加一条初始宽度为 0 的横线，并在鼠标悬停时通过 CSS 过渡动画将其宽度扩展到 100% 并移动到链接的左侧left: 0;

css 复制代码

.transition-text h3 {
  font-weight: 500;
  display: inline-block;
  position: relative;
  line-height: 30px;
  color: #191c1e;
}

.transition-text h3:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #65a835;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.transition-text h3:hover:after {
  width: 100%;
  left: 0;
}

动画属性的应用

我们通过动画属性根据需求和创意实现：实现悬停效果，如颜色变化、放大缩小；轮播图实现动态切换效果；元素实现缩放效果，如放大缩小、扩展收缩；让滚动条实现平滑滚动、渐变滚动等效果。

实现一个动态加载效果

例如，我们可以使用动画属性来实现一个动态加载效果

css 复制代码

.loader {
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;  /*设置相对定位，以便在内部元素中使用绝对定位。*/
  margin: 0 auto;
}

#loader-1:before, #loader-1:after {
  content: "";
  position: absolute;   /*使用绝对定位，相对于 .loader 元素进行定位*/
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 7px solid transparent;
  border-top-color: #3c9cfd;
}

#loader-1:before {
  z-index: 100;  /*设置层叠顺序，确保在加载器内的其他元素之上。*/
  animation: spin 2s infinite;  /*应用名为 spin 的动画，旋转360度，每次耗时2秒，无限循环。*/
}

#loader-1:after {
  border: 7px solid #fafafa; 
}

@keyframes spin {
  0% {
    transform: rotate(0deg);  /*开始时旋转角度为0度*/
  }
  100% {
    transform: rotate(360deg);   /*结束时旋转角度为360度，完成一整个旋转*/
  }
}

变形transform属性的应用

实现字体放大缩小

transform: scale(0.x);

实现梯形

使用 skewX() 函数来沿 X 轴倾斜元素，从而实现梯形效果。根据需要调整倾斜角度，实现不同形状的梯形背景。

css 复制代码

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #f00;
   transform: skewX(-20deg);
}

CSS3特性及应用【1】—— 圆角、阴影、渐变、过渡、动画、变形

圆角属性

阴影属性

渐变属性 CSS gradient

linear-gradient 线性渐变

radial-gradient 圆心渐变

过渡属性 Transition

transition-property 设置过渡属性

transition-duration 设置过渡持续时间

transition-timing-function 设置过渡效果的变化速度

transition-delay 设置延迟时间

动画属性

keyframes 关键帧定义

animation 属性

变形属性 Transform Properties

transform属性

3D转换

圆角属性应用

border-radius +box-shadow 属性来创建卡片

box-shadow 属性来创建创意装饰

使用border-radius 属性制作一个三角形

等腰直角三角形

等腰三角形

硬件加速特性

渐变属性应用

通过linear-gradient属性给背景图像作为一个水平渐变

实现波浪形下划线

通过渐变实现线性百分比

过渡属性的应用

实现图片自然放大效果

实现动态下划波浪线效果

动画属性的应用

实现一个动态加载效果

变形transform属性的应用

实现字体放大缩小

实现梯形