[关闭]
@Lxyour 2018-02-06T21:43:37.000000Z 字数 8424 阅读 1575

CSS3新增属性

CSS3


一、CSS选择器

1.CSS1定义的选择器

选择器 类型 说明
E 类型选择器 选择指定类型的元素
E#id id选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略。
E.class 类选择器 选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略。
E F 包含选择器 选择匹配F的元素,且该元素被包含在匹配E的元素内。
E:link 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并未被访问。例:a:link
E:visited 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并已被访问。例:a:visited
E:active 用户操作伪类选择器 选择匹配E的元素,且匹配元素被激活
E:hover 用户操作伪类选择器 选择匹配E的元素,且匹配元素正被鼠标经过
E:focus 用户操作伪类选择器 选择匹配E的元素,且匹配元素获取了焦点
E::first-line 伪元素选择器 选择匹配E元素内的第一行文本
E::first-letter 伪元素选择器 选择匹配E元素内的第一个字符

2. CSS2定义的选择器

选择器 类型 说明
* 通配选择器 选择文档中所有元素
E[foo] 属性选择器 选择匹配E的元素,且该元素定义了foo属性。E选择符可以省略,表示选择定义了foo属性的任意类型的元素。
E[foo="bar"] 属性选择器 选择匹配E的元素,且该元素foo属性值为“bar”
E[foo~="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值是一个以空格符分隔的列表,其中一个列表的值为“bar”,E选择符可以省略。
E[foo!="en"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值是一个用连字符(-)分隔的列表,值以“en”开头。
E:first-child 结构伪类选择器 选择匹配E的元素,且该元素为父元素的第一个子元素
E::before 伪元素选择器 在匹配E的元素前面插入内容
E::after 伪元素选择器 在匹配E的元素后面插入内容
E > F 子包含选择器 选择匹配F的元素,且该元素为所匹配E元素的子元素。
E + F 相邻兄弟选择器 选择匹配F的元素,且该元素为所匹配E元素后面相邻的位置。

3. CSS3新增属性选择器

选择器 类型 说明
E[foo^="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值以“bar”开始。E选择符可以省略,表示可匹配任意类型的元素。
E[foo$="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值以“bar”结束。E选择符可以省略,表示可匹配任意类型的元素。
E[foo*="bar"] 属性选择器 选择匹配E的元素,且该元素foo属性值为“bar”

4. 结构伪类选择器

选择器 说明
E:root 选择匹配E所在文档的根元素。在(X)HTML文档中,根元素就是html元素,此时该选择器与html类型选择器匹配的内容相同。
E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素。
注意,参数n可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3)参数的索引从1开始。
tr:nth-child(3)匹配所有表格中第3排的tr;
tr:nth-child(2n+1)匹配所有表格的奇数行;
tr:nth-child(2n)匹配所有表格的偶数行;
tr:nth-child(odd)匹配所有表格的奇数行;
tr:nth-child(even)匹配所有表格的偶数行;
E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n) 选择父元素中第n个位置,且匹配E的子元素。注意,所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。参数n可以是数字,关键字、公式。例:p:nth-of-type(1)
E:nth-last-of-type(n) 选择父元素中倒数第n个位置,且匹配E的子元素。
E:last-child 选择位于其父元素中最后一个位置,且匹配E的子元素。
E:first-of-type 选择位于其父元素中且匹配E的第一个同类型的子元素。该选择器的功能类似于 E:nth-of-type(1)
E:last-of-type 选择位于其父元素中且匹配E的最后第一个同类型的子元素。该选择器的功能类似于 E:nth-last-of-type(1)
E:only-child 选择其父元素只包含一个子元素,且该子元素匹配E。
E:only-of-type 选择其父元素只包含一个同类型的子元素,且该子元素匹配E。
E:empty 选择匹配E的元素,且该元素不包含子节点。

5. UI状态伪类选择器

选择器 说明
E:enabled 选择匹配E的所有可用UI元素。
E:disabled 选择匹配E的所有不可用UI元素。
E:checked 选择匹配E的所有可用UI元素。例:input:checked匹配input type为radio及checkbox元素

6. CSS3其他选择器

选择器 说明
E~F 通用兄弟元素选择器类型。
选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。
在DOM结构树中,E和F所匹配的元素应该在同一级结构上。
E:not(s) 否定伪类选择器类型。
选择匹配E的所有元素,且过滤掉匹配s选择符的任意元素。
s是一个简单结构的选择器,不能使用符合选择器,
E:target 目标伪类选择器类型。
选择匹配E的所有元素,且匹配元素被相关URL指向。
注意:该选择器是动态选择器,只有存在URL指向该匹配元素时,样式才起效果。例:demo.html#id

二、@Font-face 特性

  1. @font-face {
  2. font-family: BorderWeb;
  3. src:url(BORDERW0.eot);
  4. }
  5. @font-face {
  6. font-family: Runic;
  7. src:url(RUNICMT0.eot);
  8. }
  9. .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
  10. .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

三、Word-wrap & Text-overflow 样式

  1. .clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
  2. width:200px;background:#ccc;}
  3. .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
  4. width:200px; background:#ccc;}
  5. <div class="clip">
  6. 不显示省略标记,而是简单的裁切条
  7. </div>
  8. <div class="ellipsis">
  9. 当对象内文本溢出时显示省略标记
  10. </div>

四、文字渲染(Text-decoration)

  1. div {
  2. -webkit-text-fill-color: black; /*文字内部填充颜色*/
  3. -webkit-text-stroke-color: red; /*文字边界填充颜色*/
  4. -webkit-text-stroke-width: 3px; /*文字边界宽度*/
  5. }

五、CSS3 的多列布局(multi-column layout)

  1. .multi_column_style{
  2. -webkit-column-count: 3; /*表示布局几列*/
  3. -webkit-column-rule: 1px solid #bbb; /*表示列与列之间的间隔条的样式*/
  4. -webkit-column-gap: 2em; /*表示列于列之间的间隔*/
  5. }

六、边框和颜色(color, border)

  1. color: rgba(255, 0, 0, 0.75);
  2. background: rgba(0, 0, 255, 0.75);
  3. color: hsla( 112, 72%, 33%, 0.68);
  4. border-radius: 15px;

七、CSS3 的渐变效果(Gradient)和背景图片

1.线性渐变
左上(0% 0%)到右上(0% 100%)即从左到右水平渐变:

  1. background: #08c;
  2. background: -moz-linear-gradient(top, #0fc 0%, #08c 100%);
  3. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0fc), color-stop(100%,#08c));
  4. background: -webkit-linear-gradient(top, #0fc 0%,#08c 100%);
  5. background: -o-linear-gradient(top, #0fc 0%,#08c 100%);
  6. background: -ms-linear-gradient(top, #0fc 0%,#08c 100%);
  7. background: linear-gradient(top, #0fc 0%,#08c 100%);

这里 linear 表示线性渐变,从上到下,由红色(#f55b3c)到红色(#d04439)的渐变;同理,也可以有从上到下,任何颜色间的渐变转换。
2. 复杂线性渐变

  1. background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
  2. color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

这里的“color-stop”为拐点.
3. 径向渐变(目标圆半径为 0)

  1. backgroud:
  2. -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

前面“50,50,50”是起始圆的圆心坐标和半径,“50,50,0”蓝色是目标圆的圆心坐标和半径,“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下,和放射由内至外不一样,径向渐变刚好相反,是由外到内的渐变。清单 15 标识的是两个同心圆,外圆半径为 50px,内圆半径为 0,那么就是从黑色到红色再到蓝色的正圆形渐变。
4.背景图片
(1)Background Clip

(2)background-position(就像 background-clip)。

(3)background-size

(4)Background Break

5.多背景图片

  1. div {
  2. background: url(src/zippy-plus.png) 10px center no-repeat,
  3. url(src/gray_lines_bg.png) 10px center repeat-x;
  4. }

此为同一元素两个背景的案例,其中一个重复显示,一个不重复。参考一下效果图:

八、CSS3 的阴影(Shadow)和反射(Reflect)效果

1.元素和文字的阴影

  1. .class1{
  2. text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
  3. }
  4. .class2{
  5. box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  6. }

2.反射

  1. .classReflect{
  2. -webkit-box-reflect: below 10px
  3. -webkit-gradient(linear, left top, left bottom, from(transparent),
  4. to(rgba(255, 255, 255, 0.51)));
  5. }

设置也很简单,大家主要关注“-webkit-box-reflect: below 10px”,他表示反射在元素下方 10px 的地方,再配上渐变效果,可见效果图如下:

九、CSS3 的盒子模型

  1. <div class="boxcontainer">
  2. <div class="item"> 1 </div>
  3. <div class="item"> 2 </div>
  4. <div class="item"> 3 </div>
  5. <div class="item flex"> 4 </div>
  6. </div>
  7. <style>
  8. .boxcontainer {
  9. width: 1000px;
  10. display: -webkit-box;
  11. display: -moz-box;
  12. -webkit-box-orient: horizontal;
  13. -moz-box-orient: horizontal;
  14. }
  15. .item {
  16. background: #357c96;
  17. font-weight: bold;
  18. margin: 2px;
  19. padding: 20px;
  20. color: #fff;
  21. font-family: Arial, sans-serif;
  22. }
  23. </style>

注意这里的“display: -webkit-box; display: -moz-box;”,它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”,他表示水平排列的盒子模型。此时,我们会看到如下效果:

细心的读者会看到,“盒子”的右侧多出来了很大一块,这是怎么回事呢?让我们再来看一个比较有特点的属性:“flex”, 参考如下代码:

  1. .flex {
  2. -webkit-box-flex: 1;
  3. -moz-box-flex: 1;
  4. }

看到什么区别了没?在第四个“item 元素”那里多了一个“flex”属性,直接来看看效果吧:

第四个“item 元素”填满了整个区域,这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值,并加入更多的元素,见如下代码:

  1. <div class="boxcontainer">
  2. <div class="item"> 1 </div>
  3. <div class="item"> 2 </div>
  4. <div class="item flex2"> 3 </div>
  5. <div class="item flex"> 4 </div>
  6. </div>
  7. .flex {
  8. -webkit-box-flex: 1;
  9. -moz-box-flex: 1;
  10. }
  11. .flex2 {
  12. -webkit-box-flex: 2;
  13. -moz-box-flex: 2;
  14. }

我们把倒数第二个元素(元素 3)也加上“box-flex”属性,并将其值设为 2,可见其效果图如下:

由此可见,元素 3 和元素 4 按比例“2:1”的方式填充外层“容器”的余下区域,这就是“box-flex”属性的进阶应用。

还有,“box-direction”可以用来翻转这四个盒子的排序,“box-ordinal-group”可以用来改变每个盒子的位置:一个盒子的 box-ordinal-group 属性值越高,就排在越后面。盒子的对方方式可以用“box-align”和“box-pack”来设定。

十、CSS3 的 Transitions, Transforms 和 Animation Transitions

1.transition

  1. <div id="transDiv" class="transStart"> transition </div>
  2. .transStart {
  3. background-color: white;
  4. -webkit-transition: background-color 0.3s linear;
  5. -moz-transition: background-color 0.3s linear;
  6. -o-transition: background-color 0.3s linear;
  7. transition: background-color 0.3s linear;
  8. }
  9. .transEnd {
  10. background-color: red;
  11. }

这里他说明的是,这里 id 为“transDiv”的 div,当它的初始“background-color”属性变化时(被 JavaScript 修改),会呈现出一种变化效果,持续时间为 0.3 秒,效果为均匀变换(linear)。如:该 div 的 class 属性由“transStart”改为“transEnd”,其背景会由白(white)渐变到红(red)。

2.Transform

  1. .skew {
  2. -webkit-transform: skew(50deg); /*倾斜*/
  3. }
  4. .scale {
  5. -webkit-transform: scale(2, 0.5); /*缩放*/
  6. }
  7. .rotate {
  8. -webkit-transform: rotate(30deg); /*旋转*/
  9. }
  10. .translate {
  11. -webkit-transform: translate(50px, 50px); /*平移*/
  12. }
  13. .all_in_one_transform {
  14. -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); /*综合*/
  15. }

3.Animation

  1. @-webkit-keyframes animname {
  2. 0% {
  3. Opacity: 0;
  4. Font-size: 12px;
  5. }
  6. 100% {
  7. Opacity: 1;
  8. Font-size: 24px;
  9. }
  10. }
  11. .anim1Div {
  12. -webkit-animation-name: animname ;
  13. -webkit-animation-duration: 1.5s;
  14. -webkit-animation-iteration-count: 4;
  15. -webkit-animation-direction: alternate;
  16. -webkit-animation-timing-function: ease-in-out;
  17. }

首先,定义动画的内容,定义动画“animname”,变化方式为由“透明”(opacity: 0)变到“不透明”(opacity: 1),同时,内部字体大小由“12px”变到“24px”。然后,再来定义 animation 的变化参数,其中,“duration”表示动画持续时间,“iteration-count”表示动画重复次数,direction 表示动画执行完一次后方向的变化方式(如第一次从右向左,第二次则从左向右),最后,“timing-function”表示变化的模式。

其实,CSS3 动画几乎支持所有的 style 变化,可以定义各种各样的动画效果以满足我们用户体验的需要。

结语:

这里介绍的 CSS3 主要的新特性,这些特性在 Chrome 和 Safari 中基本都是支持的,Firefox 支持其中的一部分,IE 和 Opera 支持的较少

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注