css3新特性

2021-04-14 21:02:07 阅读：163 来源： 互联网

标签：css3 动画 column transform 特性实例 rule div

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,动画,column,transform,特性,实例,rule,div
来源： https://www.cnblogs.com/lishengwang/p/14659801.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css3新特性

c3有哪些新特性

介绍

新特性

边框

2D转换

3D转换