CSS3
发表CSS19 分钟读完 (大约2798个字)

CSS3

样式

边框

  1. box-shadow：用来给边框添加阴影
1
2
3
4
box-shadow: h-shadow v-shadow blur spread color inset;

//可以设置多个阴影，多个阴影之间用逗号分隔
box-shadow: 0 5px 10px black, 0 10px 20px rgba(0, 0, 0, 0.5);
  • h-shadow：表示水平方向的阴影偏移量，可以是负值（向左偏移）或正值（向右偏移）。
  • v-shadow：表示垂直方向的阴影偏移量，可以是负值（向上偏移）或正值（向下偏移）。
  • blur：表示模糊半径，值越大，阴影越模糊，为 0 时没有模糊效果。
  • spread：表示阴影的尺寸，为正值时会增加阴影的尺寸，为负值时会减少阴影的尺寸。
  • color：表示阴影的颜色，可以使用颜色关键字、十六进制值、RGB 值等。
  • inset：可选值，表示阴影是否为内阴影（inset）。
  1. border-image：使用图像创建一个边框
1
border-image: source slice width outset repeat;
  • source：指定用作边框的图像路径。可以是图片的 URL，也可以是 none，表示不使用图像，仅使用 CSS 定义的边框样式。
  • slice：指定图片如何被分割成九个区域。这个值通常是一个数值或百分比，用于定义四条边框分割图像的位置。
  • width：指定边框的宽度。可以是像素、百分比或其他长度单位。
  • outset：可选项，指定边框图像的外部填充（通常用于创建立体效果）。
  • repeat：可选项，指定边框图像的重复方式，可以是 stretch（拉伸）、repeat（平铺）、round（拉伸并平铺）、或者指定一个数值表示图像重复的次数。

圆角

border-radius：用于创建圆角：

1
border-radius: value;
  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同

背景

  • background-image

  • background-size

  • background-origin：指定了背景图像的位置区域。

    • content-box, padding-box,和 border-box区域内可以放置背景图像。

  • background-clip：背景剪裁属性从指定位置开始绘制。

文本

  • text-shadow：用于文本阴影
  • text-overflow：指定应向用户如何显示溢出内容
  • word-wrap：自动换行属性允许您强制文本换行，即使这意味着分裂它中间的一个字
  • word-break：指定换行规则

渐变

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
1
2
3
4
5
6
7
8
//使用方向语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

//使用角度语法：
background-image: linear-gradient(angle, color-stop1, color-stop2);

//函数用于重复线性渐变：
repeating-linear-gradient()
  • 径向渐变（Radial Gradients）- 由它们的中心定义
1
2
3
4
5
//语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
   
//函数用于重复径向渐变：
repeating-radial-gradient()

2D/3D 转换

定义：CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%); //平移
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);  //缩放
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);    //旋转
transform: skew(30deg, 20deg);   //歪斜
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

  • translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

  • rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

  • scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

  • skew()：包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

    • skewX();表示只在X轴(水平方向)倾斜。
    • skewY();表示只在Y轴(垂直方向)倾斜。

  • matrix()：有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

  • rotateX()：围绕其在一个给定度数X轴旋转的元素

  • rotateY()：围绕其在一个给定度数Y轴旋转的元素

  • 要应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

  • none：不应用任何变换。

  • transform-origin 属性更改一个元素变形的原点：

  • transform-origin 属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

  • 一个值：

    • 必须是长度，百分比值，或 left, center, right, top, bottom关键字中的一个。

  • 两个值：

    • 其中一个必须是长度，百分比值，或left, center, right关键字中的一个。
    • 另一个必须是长度，百分比值，或top, center, bottom关键字中的一个。

  • 三个值：

    • 前两个值和只有两个值时的用法相同。
    • 第三个值必须是长度。它始终代表 Z 轴偏移量。
1
2
transform-origin: center;
transform-origin: top left;

动画

过度

定义：过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素()之间切换，像是 :hover,:active或者通过 JS 实现的状态变化。

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;
  • CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)：何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。
  • transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
  • 可以设置过渡的属性一般是数值型的，例如宽高、颜色、间距等。

每个单属性转换都描述了应该应用于单个属性的转换（或特殊值all和none）。这包括：

  • 零或一个值，表示转换应适用的属性。这可能是以下任何一种：

    • 关键字none
    • 关键字all
    • 命名 CSS 属性的标识符 。

  • 零或一个时间函数值表示要使用的过渡函数

  • 零，一或两个时间值。可以解析为时间的第一个值被分配给 duration ，并且可以解析为时间的第二个值被分配给 delay 。

  • 当transition属性的值个数超过可以接收的值的个数时，多余的值都会被忽略掉，不再进行解析。

  • 过渡是一次性的不能循环，如果想要循环需要使用「@keyframes」关键字。

动画

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

1
2
3
4
5
6
7
8
9
10
11
@keyframes myfirst
{
  from {background: red;}
  to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
  from {background: red;}
  to {background: yellow;}
}

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长
1
2
3
4
5
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

响应式/自适应

em

使用 em 值创建动态或计算字体大小（历史上，em 单位是从给定字体中大写字母“M”的宽度派生的）。数字值作为当前元素的 font-size 属性的乘数。考虑以下示例：

1
2
3
p {
  font-size: 2em;
}

在这种情况下，<p>元素的大小将会是其通过继承得到的 font-size 计算值的两倍。因此，1em 的 font-size 等于元素所使用的 font-size 计算值。

为了计算所需像素值的等效 em 值，你可以使用以下公式：

em = 希望得到的像素大小 / 父元素字体像素大小

例如，假设页面的 <body>的 font-size 设置为 16px。如果你想要的字体大小为 12px，那么应该指定 0.75em（因为 12/16 = 0.75）。同样，如果你想要字体大小为 10px，则应指定 0.625em（10/16 = 0.625）；对于 22px，请指定 1.375em（22/16）。

CSS 中的 em 是非常有用的单位，因为它会根据读者选择使用的字体自动调整其长度。

记住一个重要事实：em 值是复合的。看下面的 HTML 和 CSS：

1
2
3
4
5
6
html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}
1
2
3
<div>
  <span>Outer <span>inner</span> outer</span>
</div>

结果：img

假设浏览器的默认 font-size 为 16px，则单词“outer”将渲染为 25.6px，但单词“inner”将渲染为 40.96px。这是因为内部 <span> 的 font-size 为 1.6em，相对于其父级的 font-size，而其父级又相对于其父级的 font-size。这通常被称为复合。

rem

rem 值的发明是为了避免复合问题。rem 值是相对于根 html 元素而不是父元素的。换句话说，它允许你以相对方式指定字体大小，而不受到父元素大小的影响，从而消除了复合问题。

下面的 CSS 与前一个示例几乎相同。唯一的例外是单位已更改为 rem。

结果：img

在这个例子中，“outer inner outer”这些单词都以 25.6 像素的大小显示（假设浏览器的 font-size 已保留默认值 16px）。

vh/vw

vw 视口宽度的 1%。
vh 视口高度的 1%。

CSS3

http://example.com/2021/01/09/前端/CSS/CSS3/

作者

冷冷

发布于

2021-01-09

更新于

2021-05-10

许可协议

CC BY-NC-SA 4.0

#
关注我

目录

最新文章

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×