心流笔记

主题

Wilson2025-03-15 03:20:36前端css
4077
16m

前端css3新特性 ​

私有前缀 ​

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了

如下代码中的-webkit-就是私有前缀：

css
div {
  width:400px;
  height:400px;
  -webkit-border-radius: 20px;
}

常见浏览器私有前缀

  • Chrome 浏览器： **-**webkit
  • Safari 浏览器： **-**webkit
  • Firefox 浏览器： -moz
  • Edge 浏览器： webkit

常用的 CSS3 新特性，主流浏览器都支持，无需添加前缀。如若不支持，可以通过插件来自动添加私有前缀

圆角边框 ​

通过border-radius属性可以给任何元素制作圆角

  • border-radius：四个边角border-*-*-radius属性的缩写。两个值（左上右下、右上左下）、三个值（左上、右上左下、右下）
  • border-top-left-radius：定义左上角弧度
  • border-top-right-radius：定义右上角弧度
  • border-bottom-right-radius：定义右下角弧度
  • border-bottom-left-radius：定义左下角的弧度

border-radius可以用于调整边框弧度，也可用于绘制图形

  • 圆形
css
.circle {
  width: 300px;
  height: 300px;
  background-color: #ffa500;
  border-radius: 50% /* 默认为宽度的比例 */
}
  • 矩形圆角
css
.capsule {
  width: 200px;
  height: 60px;
  background-color: purple;
  /* 胶囊按钮  盒子高度的一半*/
  border-radius: 30px;
}

当border-radius的值超过元素最小边（即height或width的一半）时，进一步增加border-radius的值将不会产生更多的变化，因为圆角不能超过元素的一半

边框外轮廓 ​

outline-width：外轮廓的宽度

outline-color：外轮廓的颜色

outline-style：外轮廓的风格

  • none：无轮廓
  • dotted：点状轮廓
  • dashed：虚线轮廓
  • solid：实线轮廓
  • double：双线轮廓

outline-offset：设置外轮廓与边框的距离，正负值均可（独立属性）

outline复合属性：width、color、style

盒阴影 ​

盒子阴影不占用空间。阴影可以叠加，使用逗号隔开

  • box-shadow: h-shadow v-shadow blur spread color inset;
  • 不能主动添加属性值 outset（默认值）否则会报错
值描述
h-shadow必需。水平阴影的位置，允许负值
v-shadow必需。垂直阴影的位置，允许负值
blur可选。模糊距离，只能正值（深、浅）
spread可选。阴影的尺寸（大、小）
color可选。阴影的颜色
inset可选。将外部阴影(outset)改为内部阴影（不常用）

新增文本属性 ​

文本阴影 ​

  • text-shadow： h-shadow v-shadow blur color;
  • 阴影可以叠加，使用逗号隔开
  • 属性值为0时，要带单位px
值描述
h-shadow必需。水平阴影的位置，允许负值
v-shadow必需。垂直阴影的位置，允许负值
blur可选。模糊距离，只能正值（深、浅）
color可选。阴影的颜色

文本换行 ​

在 CSS3 中，我们可以使用white-space属性设置文本换行方式

常用属性值如下：

值含义
normal文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值）
pre原样输出，与pre标签的效果相同
pre-wrap在pre效果的基础上，超出元素边界自动换行
pre-lin在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格 会忽略
nowrap强制不换行

文本溢出 ​

在 CSS3 中，我们可以使用text-overflow属性设置文本内容溢出时的呈现模式

常用属性值如下：

值含义
clip当内联内容溢出时，将溢出部分裁切掉（默认值）
ellipsis当内联内容溢出块容器时，将溢出部分替换为...

要使text-overflow属性生效，块容器必须显式定义 overflow 为非 visible值， white-space 为 nowrap 值

文本修饰 ​

CSS3 升级了 text-decoration 属性，让其变成了复合属性

css
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

子属性含义：

  • text-decoration-line（设置文本装饰线的位置）
    • none：指定文字无装饰 （默认值）
    • underline：指定文字的装饰是下划线
    • overline：指定文字的装饰是上划线
    • line-through：指定文字的装饰是贯穿线
  • text-decoration-style（文本装饰线条的形状）
    • solid：实线 （默认）
    • double：双线
    • dotted：点状线条
    • dashed：虚线
    • wavy：波浪线
  • text-decoration-color（文本装饰线条的颜色）

字体新增 ​

可以通过@font-face指定字体的具体地址，浏览器会自动下载该字体，无需依赖用户电脑上的字体

  • font-family: 必需，规定字体的名称
  • src: 必需，定义字体文件的URL
  • font-stretch: 可选，定义如何拉伸字体，默认是normal
  • font-style: 可选，定义字体的样式，默认是normal
  • font-weight: 可选，定义字体的粗细，默认是normal
  • unicode-range: 可选，定义字体支持的UNICODE字符范围，默认是U+0-10FFFF
css
@font-face {
  font-family: "情书字体";
  src: url('./方正手迹.ttf');
}

字体图标用法同上。不同字体图标用法也不同，以对应官网为准

渐变 ​

CSS3渐变可以在两个或多个指定的颜色之间显示平稳的过渡，渐变值一般由UI提供，前端程序员了解即可

渐变主要分为：

  • Linear Gradients：线性渐变，向下/向上/向左/向右/对角方向
  • Radial Gradients：径向渐变，由中心定义

线性渐变 ​

线性渐变语法：

css
/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);

/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

使用示例：

  • 多个颜色渐变， 默认从上到下渐变

image-20240219095839431

css
background-image: linear-gradient(red,yellow,green);
  • 关键词、角度设置线性渐变的方向

image-20240219100411457

css
background-image: linear-gradient(to right top,red,yellow,green);
background-image: linear-gradient(30deg,red,yellow,green);
  • 调整开始渐变的位置

image-20240219100552335

css
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

径向渐变 ​

径向渐变语法：

css
/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%) /* 值可以为 circle、ellipse */

使用示例：

  • 多个颜色之间的渐变， 默认从圆心四散

image-20240219101419119

css
background-image: radial-gradient(red,yellow,green);
  • 使用关键词、像素值调整渐变圆的圆心位置

image-20240219101454876

css
background-image: radial-gradient(at right top,red,yellow,green);
background-image: radial-gradient(at 300px 0px,red,yellow,green);
  • 调整渐变形状为正圆

image-20240219101709306

css
background-image: radial-gradient(circle,red,yellow,green);
  • 调整形状的半径

image-20240219101751173image-20240219101756224

css
background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);
  • 调整开始渐变的位置

image-20240219101849450

css
background-image: radial-gradient(red 50px,yellow 100px,green 150px);

重复渐变 ​

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变

  • 使用repeating-linear-gradient进行重复线性渐变，具体参数同linear-gradient
  • 使用repeating-radial-gradient进行重复径向渐变，具体参数同radial-gradient

滤镜 ​

CSS3的filter属性可支持对于网页进行各种滤镜效果，官网滤镜用法示例

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

平面转换2D ​

二维坐标系：

image-20240218170949842

平面位移 ​

使用transform属性实现元素的位移（translate）、旋转（rotate）、缩放（scale）等效果

  • 位移语法translate：
css
/* 元素移动到坐标轴的哪个位置 */
transform: translate(x,y); /* 单个值时，默认为x方向 */
transform: translateX(); /* 值或百分比，百分比参考自身宽度 */
transform: translateY(); /* 值或百分比，百分比参考自身高度 */

margin与translate的区别？

  • margin百分比值参考父元素的宽度，translate参考元素自身
  • margin移动时会影响其他元素位置，translate不会影响其他元素，且未脱离标准流（有相对定位的特点）

平面旋转 ​

  • rotate：设置旋转角度，指定角度值deg或turn，正顺负逆
  • rotate要与transition配合使用才能看到效果
css
transform: rotate(1turn) /* 1turn为一圈 */

平面缩放 ​

使用scale改变元素的尺寸

css
transform: scale(x轴缩放倍数,y轴缩放倍数);

注意点：

  • 缩放只是一种视觉效果，不会影响其他盒子

  • scale值大于1为放大，小于1为缩小

  • 缩放可以取负值，先缩小再放大

  • 若scale只设一个值，则表示 x 和 y 轴等比例缩放

倾斜 ​

使用skew使元素倾斜（扭曲），参数值为角度值（了解即可）

css
/* 正值（整体左斜）斜边在右 */
/* 负值（整体右斜）斜边在左 */
transform: skew(angle);
/* 多个值 */
transform: skew (ax,ay);
skewX(ax);
skewY(ay);

多重变换 ​

使用transform复合属性实现多形态变换。多重变换时建议最后旋转

css
transform: translate() rotate(); /* 先位移后旋转 */

旋转会改变网页元素的坐标轴向。先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换效果（坐标轴改变）

变换原点 ​

元素变换时，默认的原点是元素的中心，使用transform-origin可以设置变换的原点

css
transform-origin: 原点水平位置 原点垂直位置;
  • 修改变换原点对位移没有影响， 对旋转和缩放会产生影响
  • 如果提供两个值，第一个用于横坐标，第二个用于纵坐标
  • 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%

取值：

  • 方位名词（left、top、right、bottom、center）
  • 像素单位数值，以左上角为零点
  • 百分比（相对于自身）

空间转换3D ​

空间转换一般不用CSS实现，仅供学习了解

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

  • x 、y 和 z 三条坐标轴构成了一个立体空间，z 轴位置与视线方向相同
  • 空间转换也叫3D转换

image-20230502195812567

立体呈现 ​

元素进行 3D 变换的首要操作：父元素开启 3D 空间

  • 使用transform-style属性
    • flat：使子元素位于此元素的二维平面内（默认值）
    • preserve-3d：使得子元素位于此元素的三维空间内
  • 空间内，转换元素都有自己独立的坐标轴，互不干扰

透视 ​

使用perspective实现透视效果，添加给开启3D变换的父元素

  • 取值：像素单位，数值在800-1200（推荐取值）不可以为负数，值越小则越近
  • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
  • 透视不是3D效果，其作用是在空间变换时，为元素添加近大远小、近实远虚的视觉效果

image-20230502200545416

透视点位置可通过perspective-origin属性来调整（一般不调整）默认的透视点在元素的中心

空间位移 ​

空间位移是在平面位移的基础上，可以让元素沿 z 轴位移

css
transform: translate3d(x, y, z); /* 值或百分比，百分比参考自身宽度 */
transform: translateX(x);
transform: translateY(y);
transform: translateZ(z);

空间旋转 ​

空间旋转是在平面旋转的基础上，可以让元素沿 x 轴和 y 轴旋转

css
/*Z轴，正值是顺时针旋转*/
transform: rotateZ(az);

/*X轴，正值是沿着X轴正方向从外到内旋转*/
transform: rotateX(ax);

/*Y轴，正值是沿着Y轴正方向从左到右*/
transform: rotateY(ay);

  • 左手法则：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

    image-20230502201027717

  • 合并写法：transform:rotate3d(x,y,z,角度);用来自定义旋转轴位置以及角度

css
transform: rotate3d(1,1,1,30deg); /* x、y、z 分别旋转30 度 */

空间缩放 ​

空间缩放是在平面缩放的基础上，可以让元素沿 z 轴缩放

css
transform: scaleX(倍数); /* 值为数字 */
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x,y,z);

多重变换 ​

多个变换，可以同时使用一个transform来编写（最后旋转，原因同2D多重变换）

css
transform: translateZ(100px) scaleZ(3) rotateY(40deg);

背部可见性 ​

使用backface-visibility指定元素背面，在面向用户时是否可见，常用值如下：

  • visible ： 指定元素背面可见，允许显示正面的镜像（默认值）
  • hidden ： 指定元素背面不可见

backface-visibility 需要加在发生 3D 变换元素的自身上

过渡 ​

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡到另一种样式

  • transition：复合属性，用于在一个属性中设置四个过渡属性（最常用）
  • transition-property：规定应用过渡的CSS属性的名称，多属性用逗号隔开。常见有none、all
  • transition-duration：定义过渡效果花费的时间，默认是 0s（秒 或 毫秒）
  • transition-timing-function：规定过渡效果的时间曲线，默认是ease
  • transition-delay：规定过渡效果何时开始，默认是 0s（秒 或 毫秒）
css
transition: 属性名 过渡时间 运动曲线(可省) 何时开始;

只设置一个时间为 duration，两个时间则依次为 duration、delay。其他值没有顺序要求

常用时间曲线：

image-20230428223449481

其他曲线参考官网：MDN-transition-timing-function、在线制作贝赛尔曲线

动画 ​

帧与关键帧 ​

一段动画，就是一段时间内连续播放 n 个画面。每一张画面，成为帧。一定时间内，播放的帧数越多，画面越流畅。关键帧指的是：在构成一段动画的若干帧中，起到决定性作用的 2-3 帧

使用动画 ​

使用animation添加动画效果，CSS中的动画通常是通过关键帧（keyframes）来定义

CSS动画默认为补间动画，补间动画是一种从一个状态到另一个状态平滑过渡的动画形式。在关键帧动画中，浏览器会自动计算在关键帧之间的中间值，以使动画效果呈现出平滑的过渡

  • 定义动画
css
@keyframes 动画名称  {
    from { }
    to { }
}
/*多步骤写法*/
@keyframes 动画名称  {
    0% { }
    30% { }
    60% { }
    100% { }
}
  • 使用动画
css
/* 只设置一个时间为 duration 两个时间则依次为 duration、delay 其他属性没有顺序和数量要求 */
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态; /* 完整属性 */

/*animation可以给一个元素添加多个动画效果*/
animation: 动画1, 动画2, ... 动画N;

动画完整属性：

属性作用取值
animation-name动画名称@keyframes 定义的动画名称
animation-duration动画时长秒、毫秒
animation-delay动画延迟时间秒、毫秒
animation-fill-mode动画执行完毕时的状态forwards：最后一帧、backwards：第一帧
animation-timing-function速度曲线steps(N)逐帧动画、linear、ease、ease-in、ease-out、ease-in-out
animation-iteration-count重复次数infinite、数字
animation-direction动画执行方向normal (正)、reverse (反)、alternate (正->反)、alternate-reverse (反->正)
animation-play-state暂停动画paused暂停、running运行

animation-iteration-count不能与animation-fill-mode、animation-direction一起使用

最近更新