css3新特性

2021-07-08 07:35:43

c3有哪些新特性

介绍

css3是CSS（层叠样式表）技术的升级版本。CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远支持CSS2。一些最重要的css3模块包括：选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 ......

新特性

一、css3的新选择器
1、标签选择器（元素选择器、标记选择器）

div {}

1）所有的标签都可以作为选择器使用
2）适用于更改某一种元素的默认样式

2、id选择器

<div id="main"></div>
#main {}

1）id是元素的唯一标志，单个页面中不可重复
2）id的命名不要用关键字（标签和属性名）
3）一般使用id给大容器命名

3、class选择器（类选择器）

<div class="box"></div>
.box {}

1）class名称可以重复使用，适用于设置一类的样式
2）多个class名用空格隔开，例<div class="box wrap"></div>

4、通配符

* {}

通配符写法为*，含义就是所有标签
常用于重置样式
* { margin: 0; padding: 0; }

5、群组选择器

.box, #main, p {}

当有多个选择符应用相同样式时，可以将选择符用英文逗号,分割的方式合并为一组

6、后代选择器

.box p {}

使用空格隔开两个选择符，上方例子代表拥有box类容器里的所有p标签

7、伪类选择器

a:link {}    /* 未访问的链接状态 */
a:visited {} /* 已访问的链接状态 */
a:hover {}   /* 鼠标滑过链接状态 */
a:active {}  /* 鼠标按下去时的状态 */

说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
	a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2）为了简化代码，可以把伪类选择符中相同 的声明提出来放在a选择符中；
	例如：a{color:red;}     a:hover{color:green;} 
	表示超链接的三种状态都相同，只有鼠标划过变化颜色

二、盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

主要的属性就以下几个：width、height、padding、border、margin。如下：

width和height: 内容的宽度、高度（不是盒子的宽度、高度）。
padding: 内边距。
margin: 外边距
border: 边框
Content(内容): 盒子的内容，显示文本和图像。

注意：在IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度

三、背景和边框

边框

1、border-image 边框

2、border-radius — 圆角

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

语法：border-radius: 1-4 length|% / 1-4 length|%;

tip：
border-radius:10px （代表四个点的半径都是10px）

border-radius:10px 20px （代表左上右下半径为10px 右上左下半径为20px）

border-radius:10px 20px 30px（代表左上半径为10px 右上左下半径为20px 右下半径为30px）

border-radius:10px 20px 30px 40px（顺时针左上开始，四个角的值）

3、box-shadow — 盒子阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

eg: .box-shadow{ box-shadow:4px 2px 6px 7px #333333 inset; }

同一盒子，可以同时加多个阴影，阴影之间用“,”隔开

.box-shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

四、文字特效

主要包括以下几种：

text-shadow 适用于文本阴影。

实例：
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

box-shadow 适用于盒子阴影

实例：
div {
    box-shadow: 10px 10px 5px #888888;
}

text-overflow 文本溢出属性指定应向用户如何显示溢出内容

实例：
p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

word-wrap 某个单词太长，不适合在一个区域内，它扩展到外面：

实例：
允许长文本换行:

p {word-wrap:break-word;}

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

实例：
p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

五、2D/3D转换

2D转换

主要有以下几种方式：

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

实例:
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

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

实例:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

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

实例:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

skew()

语法：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
1）skewX();表示只在X轴(水平方向)倾斜。
2）skewY();表示只在Y轴(垂直方向)倾斜。

实例:
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

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

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

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

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 */
}

3D转换

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

实例:
div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

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

实例:
div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

2D和3D转换的属性非常之多，有需要了解的朋友可以参考官方文档，这里就不一一赘叙了！

六、动画

CSS3中的动画分为：平移动画、过渡动画和自定义动画三种。

平移动画：transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew；
过渡动画：transition: transition是一个复合属性，包括：
transition-property:过渡属性(即哪些元素使用过渡动画)；
transition-delay：过渡延时；
transition-duration：过渡时间；
transition-timing-function：过渡方式（linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认，以低速开始，然后加快，在结束前变慢。）
tip：如果写复合属性，当出现两个时间，则第一个为动画时间，第二个表示延时时间；如果只有一个时间，则表示的时动画时间。
自定义动画(帧动画）：animation: 动画名称时间运动方式是否循环;
animation-name: zidingyi; 动画名称;
animation-delay: 1s ; 动画延迟时间;
animation-direction: alternate; 动画的播放方向（alternate表示第135次正向播放，246次反向播放);
animation-duration: 3s; 动画的播放时间;
animation-iteration-count: 1; 动画的播放次数（如果其后的属性值为infinite，则表示自定义的动画一直循环播放;
animation-play-state: running; 动画播放是否暂停;
animation-timing-function: linear; 动画的播放方式;

七、多列布局

column-count 指定了需要分割的列数。
以下实例将
元素中的文本分为 3 列：

实例:
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

ccolumn-gap 指定了列与列间的间隙。
以下实例指定了列与列间的间隙为 40 像素：

实例:
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

column-rule-style 指定了列与列间的边框样式：

实例:
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

column-rule-width 指定了两列的边框厚度:

实例:
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

column-rule-color 指定了两列的边框颜色：

实例:
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

column-rule 是 column-rule-* 所有属性的简写。
以下实例设置了列直接的边框的厚度，样式及颜色：

实例:
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

column-span 指定元素跨越多少列
以下实例指定 h2 元素跨越所有列：

实例:
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

column-width 指定了列的宽度。

实例:
div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

说在最后：css3其实是一个非常有趣，神奇的东西！！有了css3，js都可以少些很多。css3虽然不是特别难，但是想要用的好、用得顺手也并不是那么容易，还是得靠大家一起努力学习，寻找一些讲的更加精细的文章书籍。c3还有许多新东西，欢迎大家补充，也希望和大家一起学习，一起进步！！

css3新特性

码农公寓

c3有哪些新特性

介绍

新特性

边框

2D转换

3D转换

相关文章