CSS3新特性整理

CSS3新特性

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

声明:本文参考 W3C CSS3 教程、菜鸟教程等,详细移步 W3C 或菜鸟教程

用 CSS3 做过一些小动画,很好用,特别是里面一些新特性,都是 CSS2 不可比拟的,这里整理一些出来,当做笔记,也当做教程,共勉!

CSS3 相比 CSS 2 对边框、背景、渐变、文本效果、字体、转换效果、过渡、动画、图片、用户界面、盒模型、媒体查询等都有了很大的改进,新增了不少功能和属性

CSS3边框

用 CSS3,可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序

属性

  • border-radius
  • box-shadow
  • border-image

兼容性

  • IE9 支持 border-radius 和 box-shadow 属性
  • IE 浏览器不支持 border-image 属性
  • Firefox、Chrome 以及 Safari 支持所有新的边框属性
  • 对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-
  • Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-

CSS3 圆角边框

CSS3中border-radius属性是用于创建圆角的

语法

1
2
border-radiusn1, n2, n3, n4 
/* n1 - n4 分别代表左上角、右上角、右下角、左下角 ,值可为百分比或像素值*/

####例子

1
2
3
4
5
6
div {
width: 100px;
height: 100px;
/* border-radius: 25px; */
border-radius: 25%;
}

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影

语法

1
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向(默认是从里往外,设置inset就是从外往里)

例子

1
2
3
4
5
6
7
div 
{
width: 100px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888 inset;
}

CSS3边界图片

border-image 属性允许你指定一个图片作为边框!用于创建上文边框的原始图像

语法

1
border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量(默认0) 铺满方式--重复(repeat)、拉伸(stretch)或铺满(round)(默认:拉伸(stretch))

例子

1
2
3
4
5
div { 
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Border

CSS3背景

CSS3更新了几个新的背景属性,提供更大背景元素控制,通过这几个背景属性,您能够做出更加精美的样式

属性

  • background-image
  • background-size
  • background-origin
  • background-clip

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性 chrome IE Firefox Safari Opera
background-image (with multiple backgrounds) 4.0 9.0 3.6 3.1 11.5
background-size 4.0 1.0 -webkit- 9.0 4.0 3.6 -moz- 4.1 3.0 -webkit- 10.5 10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

CSS3 背景图片

CSS3中可以通过background-image属性添加背景图片

语法

1
background-image: url, 定位, 平铺

例子

不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张

1
2
3
4
5
#example1 { 
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

可以给不同的图片设置多个不同的属性,每张图片之间依然用逗号隔开

1
2
3
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS3 背景图像大小

background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定

语法

1
background-size: 宽 高; // 宽高可以是像素值,也可以是百分比

例子

像素值

1
2
3
4
5
6
div
{
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}

相对于父元素的宽度和高度的百分比的大小

1
2
3
4
5
6
div
{
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}

CSS3 背景起始位置

background-Origin属性指定了背景图像的位置区域

语法

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

1
2
background-Origin: content-box, padding-box,和 border-box;
// 三个属性三选一,区域内可以放置背景图像

img

例子

在 content-box 中定位背景图片

1
2
3
4
5
6
7
div 
{
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}

CSS3 背景图像裁剪

CSS3中background-clip背景剪裁属性是从指定位置开始绘制

语法

从content-box, padding-box,或 border-box位置进行背景图像裁剪

1
2
background-clip: content-box, padding-box,和 border-box;
// 三个属性三选一,区域内可以放置背景图像

例子

从 content-box 开始裁剪

1
2
3
4
5
6
#example1 { 
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

CSS3渐变

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡

属性

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

兼容性

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本

属性 Chrome IE Firefox Safari Opera
linear-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.1 -o-
radial-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.6 -o-
repeating-linear-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.1 -o-
repeating-radial-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.6 -o-

CSS3线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)

线性渐变

语法

linear-gradient

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

例子

从上到下:从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色

1
2
3
4
5
6
#grad { 
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右:从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色

1
2
3
4
5
6
#grad { 
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

对角:从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色

1
2
3
4
5
6
#grad { 
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

使用多个颜色节点从上到下的线性渐变

1
2
3
4
5
6
#grad { 
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}

带有彩虹颜色和文本从左到右的线性渐变

1
2
3
4
5
6
7
8
9
10
#grad { 
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

使用透明度(Transparency)

CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明

从左边开始的线性渐变。起点是完全透明,慢慢过渡到完全不透明的红色

1
2
3
4
5
6
#grad { 
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}

repeating-linear-gradient() 函数用于重复线性渐变

1
2
3
4
5
6
7
8
9
10
#grad { 
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

角度渐变

角度渐变:属于线性渐变,如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)

#####语法

角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变

1
background: linear-gradient(angle, color-stop1, color-stop2);

注意:很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度

例子

带有指定的角度的线性渐变

1
2
3
4
5
6
#grad { 
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

CSS3径向渐变

说明:我这里是参照 W3C 总结的,发现了几篇更为详细的文档,这里推荐一下:

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色

语法

radial-gradient

可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)

1
2
background: radial-gradient(center, shape size, start-color, ..., last-color)
// 渐变的中心、形状(圆形或椭圆形)、大小

Radial gradient

例子

颜色结点均匀分布的径向渐变

1
2
3
4
5
6
#grad { 
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}

颜色结点不均匀分布的径向渐变

1
2
3
4
5
6
#grad { 
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse

形状为圆形的径向渐变

1
2
3
4
5
6
#grad { 
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

不同尺寸大小关键字的径向渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#grad1 { 
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}

#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

1
2
3
4
5
6
7
8
9
10
#grad { 
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

CSS3文本效果

CSS3中包含几个新的文本特征

属性

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

兼容性

浏览器支持

属性 Chrome IE Firefox Safari Opera
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0 4.0 -webkit- 9.0 4.0 3.5 -moz- 5.1 3.1 -webkit- 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0 9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

CSS3文本阴影

CSS3中,text-shadow 属性适用于文本阴影

Text shadow effect!

语法

1
text-shadow: 水平阴影,垂直阴影,模糊的距离,阴影的颜色

例子

给标题添加阴影

1
2
3
h1{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3盒子阴影

CSS3 中 box-shadow 属性适用于盒子阴影

语法

1
box-shadow: x轴偏移 y轴偏移 模糊距离 阴影颜色

例子

1
div { box-shadow: 10px 10px 5px yellow;}

也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#boxshadow { 
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px; bac kground: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}

文字卡片效果

1
2
3
4
5
div.card { 
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

CSS3溢出内容效果

CSS3文本溢出属性Text Overflow指定应向用户如何显示溢出内容

语法

clip: 修剪文本

ellipsis:显示省略符号来代表被修剪的文本

string:使用给定的字符串来代表被修剪的文本

1
text-overflow: clip|ellipsis|string;

例子

带有 hover 效果的 Text-overflow

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
34
35
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>

</head>

<body>

<p>如果您把光标移动到下面两个 div 上,就能够看到全部文本。</p>

<p>这个 div 使用 "text-overflow:ellipsis" :</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip":</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

CSS3换行

word-wrap自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

语法

normal:只在允许的断字点换行(浏览器保持默认处理)

break-word:在长单词或 URL 地址内部进行换行

1
word-wrap: normal|break-word;

例子

允许长文本换行

1
p {word-wrap: break-word;}

CSS3单词拆分行

CSS3 单词拆分换行属性word-break指定换行规则

语法

normal:使用浏览器默认的换行规则

break-all:允许在单词内换行

keep-all:只能在半角空格或连字符处换行

1
word-break: normal|break-all|keep-all;

例子

1
2
3
4
5
6
p.test1 { 
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}

CSS其他文本属性

内容来自菜鸟教程

属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

CSS3字体

通过CSS3,web设计师可以使用他们喜欢的任意字体

With CSS3, web designers are no longer forced to use only web-safe fonts

属性

当您找到或购买到希望使用的字体时,可将该字体文件存放到web服务器上,它会在需要时被自动下载到用户的计算机上

  • @font-face

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

属性 Chrome IE Firefox Safari Opera
@font-face 4.0 9.0 3.5 3.2 10.0
  • Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

  • Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。

  • Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

  • Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

  • 需要注意的是: Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

CSS3设置字体

CSS3中用@font-face属性来设置自己喜欢的字体

语法

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件

例子

1
2
3
4
5
6
7
8
9
10
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义

说明:表格来源于 W3C

描述符 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded 可选。定义如何拉伸字体。默认是 “normal”。
font-style normalitalicoblique 可选。定义字体的样式。默认是 “normal”。
font-weight normal/bold/100-900 可选。定义字体的粗细。默认是 “normal”。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

CSS3 2D 转换

可以移动,比例化,反过来,旋转,和拉伸元素

img

属性

  • transform
  • transform-origin

方法

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5 -moz- 3.2 -webkit- 23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax) 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5 -moz- 3.2 -webkit- 23.0 15.0 -webkit- 12.1 10.5 -o-

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意: Internet Explorer 9 要求前缀 -ms- 版本.

translate()

移动

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

img

语法

1
transform: translate(x轴移动距离, y轴移动距离) // 原点在左上角

案例

translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素

1
2
3
4
5
div { 
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate()

旋转,旋转过后,原点会跟着变化

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

img

语法

1
transform: rotate(angle) // 括号内填写旋转角度

例子

rotate值(30deg)元素顺时针旋转30度

1
2
3
4
5
div { 
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale()

缩放

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

img

语法

1
transform: scale(宽度的倍数, 高度的倍数)

####例子

scale(2,4)转变宽度为原来的大小的2倍,和其原始大小4倍的高度

1
2
3
4
5
6
div 
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}

skew()

CSS3 倾斜

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

语法

  • skewX( );表示只在X轴(水平方向)倾斜。
  • skewY( );表示只在Y轴(垂直方向)倾斜。
1
transform: skew(相对于x轴角度, 相对于y轴角度)

例子

skew(30deg,20deg) 是元素在X轴和Y轴上倾斜30度20度

此处 W3C 上教程有误,他写的是 skew(30deg,20deg) 是元素在X轴和Y轴上倾斜20度30度

W3Cskew

1
2
3
4
5
div { 
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

###matrix()

CSS3 矩阵,反正我用得少

matrix()方法将2D变换方法合并成一个

img

语法

1
transform: matrix(旋转角度, 缩放比例, 移动, 倾斜)

例子

利用matrix()方法旋转div元素30°

1
2
3
4
5
6
div 
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

CSS3 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
transform 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
transform-origin (three-value syntax) 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
transform-style 36.0 12.0 -webkit- 11.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
perspective 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
perspective-origin 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
backface-visibility 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-

###rotateX()

Rotate X

例子

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

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3C(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

rotateY()

Rotate Y

例子

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

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3C(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

CSS3 转换属性

下表列出了CSS3所有的转换属性

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

CSS3 3D 转换方法

类似于 CSS3 2D 转换方法的使用

函数 描述
matrix3d(n**,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,**n ) 定义 3D 转换使用 16 个值的 4x4 矩阵。
translate3d(x**,y,**z) 定义 3D 转化。
translateX(x) 定义 3D 转化仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化仅使用用于 Z 轴的值。
scale3d(x**,y,**z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换通过给定一个 Z 轴的值。
rotate3d(x**,y,z,**angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3 过渡

CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript

属性

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
transition 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-delay 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-duration 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-property 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-timing-function 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-

transition

语法

transition需要配合一个变化的属性进行

1
2
3
4
5
6
div:hover {
width: 300px;
}
div {
transition: 指定需要变化的属性(例如width),完成时间, 转速曲线, 延迟执行的时间
}

例子

指定当鼠标经过 div 的 1s 之后 , div 的 width 在 1 秒时间内,匀速变化为 300 px

1
2
3
4
5
6
div:hover {
width: 300px;
}
div {
transition: width 1s linear 1s;
}

拆分写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div:hover {
width: 300px;
}

div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 1s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
}

注:这里看到了一篇很棒的文档,推荐一下CSS3过渡和动画

CSS3 动画

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts

属性

  • @keyframes
  • animation

兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
@keyframes 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o-
animation 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o-

语法

@keyframes 和 animation 一般配合使用,使用 @keyframes 定义一个动画,使用 animation 去执行这个动画

例子

必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0

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

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

div {
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

可以以百分比指定动画发生时间

为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器

当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

div {
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

改变背景色和位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div {
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3

运行myfirst动画,设置所有的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div {
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

与上面的动画相同,但是使用了简写的动画 animation 属性

1
2
3
4
5
div {
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

CSS3 弹性盒子(Flex Box)

详见Flex布局

CSS3用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框

属性

  • resize
  • box-sizing
  • outline-offset

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
resize 4.0 不兼容 5.0 4.0 -moz- 4.0 15.0
box-sizing 10.0 4.0 -webkit- 8.0 29.0 2.0 -moz- 5.1 3.1 -webkit- 9.5
outline-offset 4.0 不兼容 5.0 4.0 -moz- 4.0 9.5

CSS3 调整尺寸

CSS3中,resize属性指定一个元素是否应该由用户去调整大小

语法

resize属性指定一个元素是否是由用户调整大小的

1
resize: none|both|horizontal|vertical
描述
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>

<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>

<div>The resize property specifies whether or not an element is resizable by the user.</div>

</body>
</html>

CSS3 方框大小调整

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

简单来说就是当需要考虑 width 或者 height 包不包括 padding 和 border 的时候可以考虑使用 box-sizing

例如:box-sizing:border-box的时候,边框和padding包含在元素的宽高之内

语法

1
box-sizing: content-box|border-box|inherit
说明
content-box 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算
inherit 指定box-sizing属性的值,应该从父元素继承

例子

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>

</body>
</html>

CSS3 外形修饰

简单来说就是在边框 border 外面又加了一层 outline-offset

轮廓与边框有两点不同:

  • 轮廓不占用空间
  • 轮廓可能是非矩形

语法

1
outline-offset: length|inherit
描述
length 轮廓与边框边缘的距离。
inherit 规定应从父元素继承 outline-offset 属性的值。

####例子

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>

<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>

</body>
</html>

CSS3 媒体查询

媒体查询很多就是用来进行响应式开发了

兼容性

属性 Chrome IE Firefox Safari Opera
@media 21.0 9.0 3.5 4.0 9.0

@media

语法

1
2
3
@media 媒体类型 and (条件) {

}

例子

利用媒体查询做响应式布局开发:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: pink;
}
@media screen and (max-width: 960px) {
body {
background-color: darkgoldenrod;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>

<h1>重置浏览器窗口查看效果!</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 960 px ,背景颜色将改变。</p>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ,背景颜色将改变。</p>

</body>
</html>

本文标题:CSS3新特性整理

文章作者:王工头

发布时间:2019年01月22日 - 17:00:23

最后更新:2019年01月25日 - 13:21:03

原始链接:https://qqqww.com/CSS3新特性整理/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------