CSS3笔记总结-css3-CSS教程网

CSS3 学习

查询 css3 兼容性的网站：[caniuse.***]

新增长度单位

rem 根元素字体大小的倍数，只与html根元素字体大小有关
vw 视口宽度的百分之多少 10vw 就是视口宽度的 10%
vh 视口高度的百分之多少 10vh 就是视口高度的 10%
vmax 视口宽高中大的那个的百分之多少。(了解即可)
vmin 视口宽高中小的那个的百分之多少。(了解即可)

新增盒子相关属性

box-sizing 怪异盒模型
- 使用 box-sizing 属性可以设置盒模型的两种类型
  1. content-box: width 和 height 设置的是盒子内容区的大小。(默认值，标准盒子模型)
  2. border-box: width 和 height 设置的是盒子总大小。(怪异盒模型)
resize 调整盒子大小
- 使用resize属性可以控制是否允许用户调节元素尺寸, 必须与 overflow属性配合使用
  1. none: 不允许用户调整元素大小。(默认)
  2. both: 用户可以调节元素的宽度和高度。
  3. horizontal: 用户可以调节元素的宽度。
  4. vertical: 用户可以调节元素的高度。
```
.box {
    width: 200px;
    height: 200px;
    resize: both;
    overflow: hidden;
    background-color: pink;
}
```
box-shadow 盒子阴影
- 使用 box-shadow 属性为盒子添加阴影,默认值是 none
- 语法：box-shadow: h-shadow v-shadow blur spread color inset;
- 各个值的含义:
  1. h-shadow: 水平阴影的位置,必须填写,可以为负值
  2. v-shadow: 垂直阴影的位置,必须填写,可以为负值
  3. blur: 可选,模料距离
  4. spread: 可选,阴影的外延值
  5. color: 可选,阴影的颜色
  6. inset: 可选,将外部阴影改为内部阴影
- 内阴影渐变效果：box-shadow: 0 0 100px red inset;
opacity不透明度
- opacity属性能为整个元素添加透明效果, 值是0到1之间的小数, 0是完全透明, 1表示完全不透明
- opacity 与 rgba 的区别?
  1. opacity 是一个属性,设置的是整个元素(包括元素里的内容)的不透明度。
  2. rgba 是颜色的设置方式,用于设置颜色,它的透明度,仅仅是调整颜色的透明度

新增背景相关属性

background-origin，作用: 设置背景图的原点。默认背景图是从盒子左上角开始平铺, 可以通过该属性设置背景平铺的起点，有三个值可选，如下：
1. padding-box:从padding区域开始显示背景图像。 -- 默认值
2. border-box:从border区域开始显示背景图像。
3. content-box:从content 区域开始显示背景图像。

background-clip，作用: 设置背景图的向外裁剪的区域。

border-box:从border区域开始向外裁剪背景。 -- 默认值
padding-box:从padding 区域开始向外裁剪背景。
content-box:从content 区域开始向外裁剪背景。
text:背景图只呈现在文字上。

注意:若值为text,那么backgroun-clip要加上-webkit-前缀。


    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600px;
        height: 300px;
        background-image: url('./images/05.jpg');
        font-size: 80px;
        font-weight: 600;
        color: rgba(255,255,255, 0.2);
        background-clip: text; /*背景图只呈现在文字上 */
    }

background-size，作用: 设置背景图的尺寸。
- 语法:
  1. 用长度值指定背景图片大小,不允许负值。background-size: 300px 200px;
  2. 用百分比指定背景图片大小,不允许负值。background-size: 100% 100%;
  3. auto: 背景图片的真实大小。 -- 默认值
  4. contain: 将背景图片等比缩放,使背景图片的宽或高,与容器的宽或高相等,再将完整背景图片包含在容器内,但要注意:可能会造成容器里部分区域没有背景图片。background-size: contain;
  5. cover: 将背景图片等比缩放,直到完全覆盖容器,图片会尽可能全的显示在元素上,但要注意:背景图片有可能显示不完整。 -- 相对比较好的选择background-size: cover;
background: 设置多背景图，
- background: url() no-reprat position, url() no-reprat position, url() no-reprat position, ;

新增边框相关属性

border-radius给边框设置圆角
边框外轮廓：只是一个样式，不占空间位置
1. outline-width:外轮廓的宽度。
2. outline-color:外轮廓的颜色。
3. outline-style:外轮廓的风格。
  - none:无轮廓
  - dotted:点状轮廓
  - dashed:虚线轮廓
  - solid:实线轮廓
  - double:双线轮廓
4. outline-offset 设置外轮廓与边框的距离,正负值都可以设置。
  - 注意:outline-offset不是outline的子属性,是一个独立的属性。
5. outline 复合属性: outline: 50px solid blue;

新增文本相关属性

text-shadow 文字阴影，与盒子引用类似
white-space 文本换行
- 在 CSS3 中,我们可以使用 white-space 属性设置文本换行方式。
- 常用值如下:
  1. normal：文本超出边界自动换行,文本中的换行被浏览器识别为一个空格。(默认值)
  2. pre：原样输出,与pre标签的效果相同。
  3. pre-wrap：在pre效果的基础上,超出元素边界自动换行。
  4. pre-line：在pre效果的基础上,超出元素边界自动换行,且只识别文本中的换行,空格会忽略。
  5. nowrap：强制不换行
text-overflow 文本溢出
- CSS3 中,我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
- 常用值如下:
  1. clip：当内联内容溢出时,将溢出部分裁切掉。
  2. ellipsis：当内联内容溢出块容器时,将溢出部分替换为…。
  3. nowrap：(默认值) 注意: 要使得 text-overflow 属性生效,块容器必须显式定义 overflow 为非 visible 值, white-space 的值为nowrap
```
div {
    width: 200px;
    height: 200px;
    overflow: hidden;    /*溢出盒子隐藏 */
    white-space: nowrap; /*强制文本不换行 */
    text-overflow: ellipsis; /*文本溢出省略号显示 */
}
```
text-decoration文本修饰
- CSS3升级了text-decoration属性, 让其变成了复合属性。
- 语法: text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
- 子属性及其含义:
  1. text-decoration-line 设置文本装饰线的位置
    - none:指定文字无装饰(默认值)
    - underline:指定文字的装饰是下划线
    - overline:指定文字的装饰是上划线
    - line-through:指定文字的装饰是贯穿线
  2. text-decoration-style 文本装饰线条的形状
    - solid:实线(默认)
    - double:双线
    - dotted:点状线条
    - dashed: 虚线
    - wavy:波浪线
  3. text-decoration-color 文本装饰线条的颜色
text-stroke文本描边
- 注意:文字描边功能仅 webkit 内核浏览器支持。
  1. -webkit-text-stroke-width:设置文字描边的宽度,写长度值。
  2. -webkit-text-stroke-color:设置文字描边的颜色,写颜色值。 -webkit-text-stroke:复合属性,设置文字描边宽度和颜色。

新增渐变

线性渐变：background-image: linear-gradient();
- 渐变本质就是背景图片
- 默认从上往下渐变，background-image: linear-gradient(red, green, blue);
- 使用关键词设置渐变方向，background-image: linear-gradient(to right, red, green, blue);
- 使用角度设置渐变方向，background-image: linear-gradient(20deg, red, green, blue);
- 修改渐变的位置，background-image: linear-gradient(red 50px, green 100px, blue 150px); 可以理解为，从顶部开始，前 50 像素是红色。接着，从 50 像素到 100 像素是绿色。最后，从 100 像素到 150 像素是蓝色。
径向渐变：background-image: radial-gradient();
- 默认从中心向外渐变：background-image: radial-gradient(red, yellow, green);
- 使用关键词设置中心的位置：background-image: radial-gradient(at left top, red, yellow, green);
- 使用像素值设置中心的位置：background-image: radial-gradient(at 100px 200px, red, yellow, green);
- 使用circle强制调整为正圆：background-image: radial-gradient(circle, red, yellow, green);
- 使用像素值强制调整为正圆：background-image: radial-gradient(100px 100px, red, yellow, green);
- 调整渐变的区域：background-image: radial-gradient(red 50px, yellow 100px, green 150px);
- 以上效果可以混合使用
重复渐变：在没有发生渐变的区域继续渐变
- 重复线性渐变：background-image: repeating-linear-gradient(red 50px, green 100px, blue 150px);
- 重复径向渐变：background-image: repeating-radial-gradient(red 50px, yellow 100px, green 150px);

新增web字体和字体图标

web字体：https://www.iconfont.***/webfont#!/webfont/index
字体图标：

新增2D变换

2D位移，
- 2D位移可以改变元素的位置,具体使用方式如下:
- 先给元素添加转换属性 transform，编写transform的具体值,相关可选值如下:
  1. translateX：设置水平方向位移,需指定长度值;若指定的是百分比,是参考自身宽度的百分比。
  2. translateY：设置垂直方向位移,需指定长度值;若指定的是百分比,是参考自身高度的百分比。
  3. translate：一个值代表水平方向,两个值代表:水平和垂直方向。
```
div {
    transform: translateX(50px); /*水平方向位移 */
    transform: translateY(50px); /*垂直方向位移 */
    transform: translate(50px, 50px); /*水平和垂直方向位移 */
    transform: translate(50%, 50%);  /*水平和垂直方向 参考自身宽度的百分比，不是父元素*/
    transform: translate(50px); /*只有一个值代表水平方向，没有垂直方向 */
}
```
- 注意点:
  1. 位移与相对定位很相似,都不脱离文档流,不会影响到其它元素。
  2. 与相对定位的区别:相对定位的百分比值,参考的是其父元素;定位的百分比值,参考的是其自身。
  3. 浏览器针对位移有优化,与定位相比,浏览器处理位移的效率更高。
  4. transform可以链式编写,例如: transform: translateX(30px) translateY(40px);
  5. 位移对行内元素无效。
  6. 位移配合定位,可实现元素水平垂直居中
2D缩放
- 2D缩放是指: 让元素放大或缩小,具体使用方式如下:
- 先給元素添加转换属性 transform ，编写transform的具体值,相关可选值如下:
  1. scaleX：设置水平方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小。
  2. scaleY：设置垂直方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小。
  3. scale：同时设置水平方向、垂直方向的缩放比例,一个值代表同时设置水平和垂直缩放; 两个值分别代表水平缩放、垂直缩放。
- 注意点:
  1. scale的值,是支持写负数的,但几乎不用,因为容易让人产生误解。
  2. 借助缩放,可实现小于12px的文字。对行内元素无效,需要转换
```
div {
    transform: scaleX(1.2); /*水平方向的缩放 */
    transform: scaleY(1.2); /*垂直方向的缩放 */
    transform: scale(1.2); /*水平方向、垂直方向的缩放 */
    /*实现小于12px的文字 */
    font-size: 20px;
    transform: scale(0.5); /*此时，字体大小为10px */
}
```
2D旋转
- 2D旋转是指: 让元素在二维平面内,顺时针旋转或逆时针旋转,具体使用方式如下:
- 先给元素添加转换属性 transform，编写transform的具体值,相关可选值如下:
  1. rotate：设置旋转角度,需指定一个角度值(deg),正值顺时针,负值逆时针。
- 注意:rotateZ(20deg)相当于 rotate(20deg),当然到了3D变换的时候,还能写:rotate(x,x,x) 旋转会改变X Y 轴的方向
```
div {
    transform: rotate(20deg);
}
```
2D扭曲

transform: skew(20deg, 20deg);

2D多重变换
- 多个变换,可以同时使用一个transform来编写。
- transform: translate(-50%, -50%) rotate(45deg);
- 注意点:多重变换时,建议最后旋转。
2D变换原点
- 元素变换时,默认的原点是元素的中心,使用transform-origin可以设置变换的原点。
- 修改变换原点对位移没有影响,对旋转和缩放会产生影响。
- 如果提供两个值,第一个用于横坐标,第二个用于纵坐标。
- 如果只提供一个,若是像素值,表示横坐标,纵坐标取50%; 若是关键词,则另一个坐标取50%
- transform-origin:50% 50%,变换原点在元素的中心位置,百分比是相对于自身。 -- 默认值
- transform-origin: left top,变换原点在元素的左上角
- transform-origin: 50px 50px,变换原点距离元素左上角 50px 50px的位置。
- transform-origin: 0,只写一个值的时候,第二个值默认为 50%。

新增3D变换

3D变换的使用流程
1. 开启3D空间：元素进行3D变换的首要操作就是父元素必须开启3D空间!
  - 使用 transform-style开启3D空间,可选值如下:
    1. flat:让子元素位于此元素的二维平面内(2D空间) -- 默认值
    2. preserve-3d:让子元素位于此元素的三维空间内(3D空间)
2. 设置景深：指定观察者与z=0平面的距离,能让发生3D变换的元素,产生透视效果,看来更加立体。
  - 使用perspective设置景深,可选值如下:
    1. ·none: 不指定透视 -- (默认值)
    2. 长度值: 指定观察者距离z=0平面的距离,不允许负值。
  - 注意:perspective设置给发生3D变换元素的父元素!
```
.out {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    margin: 100px auto;
    /*1.给父元素开启3D空间*/
    transform-style: preserve-3d;
    /*2.设置景深*/
    perspective: 500px;
}
.inner {
    width: 400px;
    height: 400px;
    background-color: skyblue;
    /*3.让子元素进行3D变换*/
    transform: rotateX(30deg);
}
```

设置透视点位置

所谓透视点位置,就是观察者位置;默认的透视点在元素的中心。
使用 perspective-origin设置观察者位置(透视点的位置),例如:
- 相对坐标轴往右偏移400px,往下偏移300px(相当于人蹲下300像素,然后向右移动400像素看元素)
- perspective-origin: 400px 300px;
- 注意:通常情况下,我们不需要调整透视点位置。

.out {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    margin: 100px auto;
    /*1.给父元素开启3D空间*/
    transform-style: preserve-3d;
    /*2.设置景深*/
    perspective: 500px;
    /*设置透视点位置*/
    perspective-origin: 400px 300px;
}
.inner {
    width: 400px;
    height: 400px;
    background-color: skyblue;
    /*3.让子元素进行3D变换*/
    transform: rotateX(30deg);
}

3D位移

3D位移是在2D位移的基础上,可以让元素沿z轴位移,具体使用方式如下:
1. 先给元素添加转换属性 transform
2. 编写transform的具体值,3D相关可选值如下:
  - translateZ：设置z轴位移,需指定长度值,正值向屏幕外,负值向屏幕里,且不能写百分比。
  - translate3d：第1个参数对应x轴,第2个参数对应y轴,第3个参数对应z轴,且均不能省略。

.out {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    margin: 100px auto;
    /*1.给父元素开启3D空间*/
    transform-style: preserve-3d;
    /*2.设置景深*/
    perspective: 500px;
    /*设置透视点位置*/
    perspective-origin: 400px 300px;
}
.inner {
    width: 400px;
    height: 400px;
    background-color: skyblue;
    /*3.让子元素进行3D变换*/
    transform: translate3d(50%, 50%, 200px);
}

3D旋转
- 3D旋转是在2D旋转的基础上,可以让元素沿x轴和y轴旋转,具体使用方式如下:
  1. 先给元素添加转换属性 transform
  2. 编写transform的具体值,3D相关可选值如下:
    - rotateX：设置x轴旋转角度,需指定一个角度值(deg),面对x轴正方向:正值顺时针(往屏幕里方向),负值逆时针(往屏幕外方向)。
    - rotateY：设置y轴旋转角度,需指定一个角度值(deg),面对y轴正方向:正值顺时针(往屏幕里方向),负值逆时针(往屏幕外方向)。
    - rotate3d：前3个参数分别表示坐标轴:x,y,z,第4个参数表示旋转的角度,参数不允许省略。例如:transform: rotate3d(1,1,1,30deg),意思是:x、y、z分别旋转30度。
3D缩放
- 3D缩放是在2D缩放的基础上,可以让元素沿z轴缩放,具体使用方式如下:
  1. 先给元素添加转换属性 transform
  2. 编写transform的具体值,3D相关可选值如下:
    - scaleZ：设置z轴方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小。
    - scale3d：第1个参数对应x轴,第2个参数对应y轴,第3个参数对应z轴,参数不允许省略。
- 沿z轴缩放,实际没有放大，只是将景深调小了，拉近了距离
多重变换多个变换,可以同时使用一个transform来编写。 transform: translateZ(100px) scaleZ(3) rotateY(40deg); 注意点:多重变换时,建议最后旋转。
背部
- 设置旋转北部不可见 backface-visibility: hidden;

过度

transition-property
- 作用: 定义哪个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡效果。
- 常用值:
  - none:不过渡任何属性。
  - all:过渡所有能过渡的属性。
  - 具体某个属性名,例如:width、heigth,若有多个以逗号分隔。
- 不是所有的属性都能过渡,值为数字,或者值能转为数字的属性,都支持过渡,否则不支持过渡。
- 常见的支持过渡的属性有:颜色、长度值、百分比、z-index、opacity、2D变换属性、3D变换属性、阴影。
transition-duration
- 作用: 设置过渡的持续时间,即:一个状态过渡到另外一个状态耗时多久。
- 常用值:
  1. 0:没有任何过渡时间 -- 默认值。
  2. s或ms:秒或毫秒。
  3. 列表:
    - 如果想让所有属性都持续一个时间,那就写一个值。
    - 如果想让每个属性持续不同的时间那就写一个时间的列表。
transition-delay
- 作用:指定开始过渡的延迟时间,单位:s或ms
transition-timing-function
- 作用:设置过渡的类型
- 常用值:
  - ease:平滑过渡 -- 默认值
  - linear:线性过渡
  - ease-in:慢→快
  - ease-out:快→慢
  - ease-in-out:慢→快→慢
  - step-start:等同于 steps(1,start)
  - step-end:等同于 steps(1,end)
  - steps(integer,?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
  - cubic-bezie (number, number, number, number):特定的贝塞尔曲线类型。 http://cubic-bezier.***/ cubic-bezier()网址
transition复合属性
- 如果设置了一个时间,表示duration;如果设置了两个时间,第一是duration,第二个是delay;其他值没有顺序要求。
- transition:1s 1s linear all;

动画

什么是帧
- 一段动画,就是一段时间内连续播n个画面每一张画面,我们管它叫做“帧”。一定时间内连续快速播放若干个帧,就成了人眼中所看到的动画。同样时间内,播放的帧数越多,画面看起来越流畅。
什么是关键帧
- 关键帧指的是,在构成一段动画的若干帧中,起到决定性作用的2-3帧。

动画使用步骤

定义关键帧

/*简单方式1*/
@keyframes 动画名 {
   from {
       background-color: red;
       transform: translateX(0);
   }
   to {
       background-color: green;
       transform: translateX(100px);
   }
}
/*简单方式2*/
@keyframes 动画名 {
   0% {
       background-color: red;
       transform: translateX(0);
   }
   50% {
       background-color: yellow;
       transform: translateX(50px);
   }
   100% {
       background-color: green;
       transform: translateX(100px);
   }
}

给元素应用动画,用到的属性如下:
- animation-name: 给元素指定具体的动画(具体的关键帧)
- animation-duration: 设置动画所需时间
- animation-delay:设置动画延迟

.box {
    /* 指定动画 */
    animation-name: testKey;
    /* 设置动画所需时间 */
    animation-duration: 5s;
    /* 设置动画延迟 */
    animation-delay: 0.5s;
}
@keyframes 动画名 {
    0% {
        background-color: red;
        transform: translateX(0);
    }
    50% {
        background-color: yellow;
        transform: translateX(50px);
    }
    100% {
        background-color: green;
        transform: translateX(100px);
    }
}

其他属性
1. animation-timing-function 设置动画类型，常用值如下：
  - ease:平滑过渡 -- 默认值
  - linear:线性过渡
  - ease-in:慢→快
  - ease-out:快→慢
  - ease-in-out:慢→快→慢
  - step-start:等同于 steps(1,start)
  - step-end:等同于 steps(1,end)
  - steps(integer,?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
  - cubic-bezie (number, number, number, number):特定的贝塞尔曲线类型。 http://cubic-bezier.***/ cubic-bezier()网址
2. animation-iteration-count 指定动画播放的次数，常用值如下：
  - number: 动画循环次数
  - infinite: 无限循环
3. animation-direction, 指定动画方向,常用值如下:
  - normal:正常方向(默认)
  - reverse:反方向运行
  - alternate:动画先正常运行再反方向运行,并持续交替运行
  - alternate-reverse:动画先反运行再正方向运行,并持续交替运行
4. animation-fill-mode,设置动画之外的状态
  - forwards: 设置对象状态为动画结束时的状态
  - backwards:设置对象状态为动画开始时的状态
5. animation-play-state,设置动画的播放状态, 通常用于一个动作里，常用值如下:
  - running:运动(默认)
  - paused:暂停
动画复合属性
- 只设置一个时间表示duration,设置两个时间分别是: duration和delay,其他属性没有数量和顺序要求。
```
.inner {
    animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}
```
- 备注:animation-play-state一般单独使用。
多列布局新闻
- 常用属性如下:
  - column-count：指定列数,值是数字。
  - column-width：指定列宽,值是长度。
  - columns:同时指定列宽和列数,复合属性;值没有数量和顺序要求。
  - column-gap:设置列边距,值是长度。
  - column-rule-style：设置列与列之间边框的风格,值与 border-style 一致。
  - column-rule-width：设置列与列之间边框的宽度,值是长度。
  - column-rule-color：设置列与列之间边框的颜色。
  - coumn-rule：设置列边框,复合属性。
  - column-span 指定某个标题是否跨列;值:none、all。
多列布局图片

div {
    column-count: 5;
}
img {
    width: 100%;
}

媒体查询

媒体类型

all: 检测所有设备
screen: 检测电子屏幕,包括:电脑屏幕、平板屏幕、手机屏幕等。
print: 检测打印机。

    /* 只有在打印机或打印预览才应用的样式 没有优先级，样式会被覆盖*/

     @media print {
            h1 {
            background: transparent;
        }
    }
    /* 只有在屏幕上才应用的样式 */
    @media screen {
        h1 {
            background: transparent;
        }
    }
    /* 一直都应用的样式 */
    @media all {
        h1 {
            color: red;
        }
    }

媒体特性，值：
- width：检测视口宽度。
- max-width：检测视口最大宽度。
- min-width：检测视口最小宽度。
- height：检测视口高度。
- max-height：检测视口最大高度。
- min-height：检测视口最小高度。
- device-width：检测设备屏幕的宽度。
- max-device-width：检测设备屏幕的最大宽度。
- min-device-width：检测设备屏幕的最小宽度。
- orientation：检测视口的旋转方向(是否横屏)。
  1. portrait:视口处于纵向,即高度大于等于宽度。
  2. landscape:视口处于横向,即宽度大于高度。
```
@media (条件) {
    /* CSS 规则 */
    div {}
}
```

媒体运算符

且 and
或 or
否定 not
肯定 only

/*且运算符*/
@media (min-width:700px) and (max-width:800px) {
    h1 {
        background-color: orange;
    }
}
/*且 限制为屏幕 */
@media screen and (min-width:700px) and (max-width:800px) {
    h1 {
        background-color: orange;
    }
}
/* 或运算符 */
@media (max-width:700px) or (min-width:800px) {
    h1 {
        background-color: orange;
    }
}
/* 或 限制为屏幕 */
@media screen and (max-width:700px) or (min-width:800px) {
    h1 {
        background-color: orange;
    }
}
/* 否定运算符 */
@media not screen {
    h1 {
        background-color: orange;
    }
}
/* 肯定定运算符 */
@media only screen {
    h1 {
        background-color: orange;
    }
}

转载请说明出处内容投诉
CSS教程网 » CSS3笔记总结

柒威网

分享到：

CSS3 学习

新增长度单位

新增盒子相关属性

新增背景相关属性

新增边框相关属性

新增文本相关属性

新增渐变

新增web字体和字体图标

新增2D变换

新增3D变换

过度

动画

媒体查询

柒威网

发表评论

一个令你着迷的主题！