New properties of CSS3 and their usage

　Nowadays, with the popularity of Web2.0 technology, the previous CSS2 standard and related technologies seem to be unable to meet the growing development needs: people need to implement a more beautiful interface with a better user experience. CSS3, this new generation of standards came into being. In order to meet the existing development needs for Web UI, it provides a series of powerful functions, such as many new CSS properties (text, layout, color, etc.), various CSS special effects, and even supports CSS animations and elements. Transform. These new CSS features can be said to be very powerful and complete at this stage. You only need to add a few lines of simple CSS code to achieve a series of eye-catching effects. This is much better than what we used JavaScript to simulate before. The effect is much better, not only reducing the complexity and making it easier to maintain, but also improving by leaps and bounds in performance. This article will mainly introduce the new features of CSS3 and some tips on its use.

Introduction:

CSS is Cascading Stylesheet. CSS technology is used in web development to effectively control the layout, fonts, colors, backgrounds and other effects of the page. With just a few simple modifications, you can change the look and format of your web pages. CSS3 is an upgraded version of CSS. This new set of standards provides richer and more practical specifications, such as: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc. Currently, there are Many browsers have successively supported this upgraded specification, such as: Firefox, Chrome, Safari, Opera, etc. Using CSS3 technology in web development will significantly beautify our applications, improve user experience, and also greatly improve program performance. This article will focus on some of the more beautiful and practical new CSS3 features.

1. CSS3 Selector

Those who have written CSS should be familiar with CSS selectors. The reason why the CSS properties we define can be applied to the corresponding nodes is because of the CSS selector mode. Refer to the following code:

Listing 1. CSS selector example

 Body > .mainTabContainer  div  > span[5]{ 
 Border: 1px solod red; 
 Background-color: white; 
 Cursor: pointer; 
 }

The CSS selector here is: "body > .mainTabContainer div span[5]" represents a path like this:

1. All elements in the direct child elements of the "body" tag whose class attribute value is "mainTabContainer" A

2. All elements B

in the descendants of A with the label div

3. The 5th element C

whose tag is span among the direct child elements of B

This C element (possibly multiple) is the element positioned by the selector, and the above CSS properties will all be applied to the C element.

The above are the main positioning methods provided by CSS2 and previous versions. Now, CSS3 provides more convenient and faster selectors:

Listing 2. CSS3 selector example

 Body > .mainTabContainer  tbody:nth-child(even){ 
 Background-color: white; 
 } 

 Body > .mainTabContainer  tr:nth-child(odd){ 
 Background-color: black; 
 } 


 :not(.textinput){ 
 Font-size: 12px; 
      } 

      Div:first-child{ 
      Border-color: red; 
      }

As shown above, we have listed some CSS3 selectors, which may be frequently used in our daily development. These new CSS3 features solve many problems that we previously needed to use JavaScript scripts to solve.

tbody: nth-child(even), nth-child(odd): Here they represent the even rows and odd rows (tr) respectively under the table (tbody). This style is very suitable for tables, making it very Clearly see the differences between rows in the table, making it easy for users to navigate.

: not(.textinput): This means all nodes whose class is not "textinput".

div:first-child: This represents the first direct child node under all div nodes.

In addition, there are many newly added selectors:

 E:nth-last-child(n) 
 E:nth-of-type(n) 
 E:nth-last-of-type(n) 
 E:last-child 
 E:first-of-type 
 E:only-child 
 E:only-of-type 
 E:empty 
 E:checked 
 E:enabled 
 E:disabled 
 E::selection 
 E:not(s)

I won’t introduce them one by one here. Learning to take advantage of these new features can greatly reduce our fear of code and greatly improve program performance.

2. @Font-face Features

Font-face can be used to load font styles, and it can also load server-side font files, allowing the client to display fonts that are not installed on the client.

Let’s first look at a simple case of client font:

List 3. Font-face client font case

 <p><font face="arial">arial courier verdana</font></p>

We can load font styles directly this way because these fonts (arial) are already installed on the client. Listing 3 This way of writing is equivalent to Listing 4:

List 4. Basic writing methods of fonts

 <p><font style="font-family: arial">arial courier verdana</font></p>

I believe everyone should be familiar with this writing method.

Next let’s look at how to use server-side fonts, that is: font styles that are not installed on the client.

See the following code:

List 5. Font-face server-side font case

 @font-face { 
 font-family: BorderWeb; 
 src:url(BORDERW0.eot); 
 } 
 @font-face { 
 font-family: Runic; 
 src:url(RUNICMT0.eot); 
 } 

 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

清单 5 中声明的两个服务端字体，其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后，我们就可以在页面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。

这种做法使得我们在开发中如果需要使用一些特殊字体，而又不确定客户端是否已安装时，便可以使用这种方式。

三、Word-wrap & Text-overflow 样式

Word-wrap

先来看看 word-wrap 属性，参考下述代码：

清单 6. word-wrap 案例

 <div style="width:300px; border:1px solid #999999; overflow: hidden"> 
 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
 </div> 


 <div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
 </div>

比较上述两段代码，加入了“word-wrap: break-word”，设置或检索当当前行超过指定容器的边界时是否断开转行，文字此时已被打散。所以可见如下的差别：

Text-overflow

知道了 word-wrap 的原理，我们再来看看 text-overflow，其实它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示，见如下示例：

清单 7. Text-overflow 案例

 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
   width:200px;background:#ccc;} 
 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
   width:200px; background:#ccc;} 

 <div class="clip"> 
  不显示省略标记，而是简单的裁切条
 </div> 

 <div class="ellipsis"> 
  当对象内文本溢出时显示省略标记
 </div>

如清单 7 所示，这里我们均使用“overflow: hidden”，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。见图 3 的效果图。

图 3. Text-overflow 效果图

这里我们可以看到，ellipsis 的显示方式比较人性化，clip 方式比较传统，我们可以依据需求进行选择。

四、文字渲染（Text-decoration）

CSS3 里面开始支持对文字的更深层次的渲染，我们来看看下面的例子：

清单 8. Text-decoration 案例

 div { 
 -webkit-text-fill-color: black; 
 -webkit-text-stroke-color: red; 
 -webkit-text-stroke-width: 2.75px; 
 }

这里我们主要以 webkit 内核浏览器为例，清单 8 的代码效果如图 4：

Text-fill-color: 文字内部填充颜色

Text-stroke-color: 文字边界填充颜色

Text-stroke-width: 文字边界宽度

五、CSS3 的多列布局（multi-column layout）

CSS3 现在已经可以做简单的布局处理了，这个 CSS3 新特性又一次的减少了我们的 JavaScript 代码量，参考如下代码：

清单 9. CSS3 多列布局

 .multi_column_style{ 
 -webkit-column-count: 3; 
 -webkit-column-rule: 1px solid #bbb; 
 -webkit-column-gap: 2em; 
 } 

 <div class="multi_column_style"> 
 ................. 
 ................. 
 </div>

这里我们还是以 webkit 内核浏览器为例：

Column-count：表示布局几列。

Column-rule：表示列与列之间的间隔条的样式

Column-gap：表示列于列之间的间隔

六、边框和颜色（color, border）

关于颜色，CSS3 已经提供透明度的支持了：

清单 10. 颜色的透明度

 color: rgba(255, 0, 0, 0.75); 
 background: rgba(0, 0, 255, 0.75);

这里的“rgba”属性中的“a”代表透明度，也就是这里的“0.75”，同时 CSS3 还支持 HSL 颜色声明方式及其透明度：

清单 11. HSL 的透明度

 color: hsla( 112, 72%, 33%, 0.68);

对于 border，CSS3 提供了圆角的支持：

清单 12. 圆角案例

 border-radius: 15px;

七、CSS3 的渐变效果（Gradient）

线性渐变

左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：

清单 13. 左到右的渐变

 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。

同理，也可以有从上到下，任何颜色间的渐变转换：

还有复杂一点的渐变，如：水平渐变，33% 处为绿色，66% 处为橙色：

清单 14. 复杂线性渐变

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

这里的“color-stop”为拐点，可见效果图：

径向渐变

接下来我们要介绍径向渐变（radial），这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子：

清单 15. 径向渐变（目标圆半径为 0）

 backgroud: 
 -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，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：

清单 16. 径向渐变（目标圆半径非 0）

 backgroud: 
 -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));

这里我们给目标圆半径为 10会有一个半径为 10 的纯蓝的圆在最中间，这就是设置目标圆半径的效果。

现在我再改变一下，不再是同心圆了，内圆圆心向右 20px 偏移。

清单 17. 径向渐变（目标圆圆心偏移）

 backgroud: 
 -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));

这里我们给目标圆半径还是 10，但是圆心偏移为“70，50”（起始圆圆心为“50，50”）

想必您明白原理了，我们可以做一个来自顶部的漫射光，类似于开了盏灯：

清单 18. 径向渐变（漫射光）

 backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

八、CSS3 的阴影（Shadow）和反射（Reflect）效果

首先来说说阴影效果，阴影效果既可用于普通元素，也可用于文字，参考如下代码：

清单 19. 元素和文字的阴影

 .class1{ 
 text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
 } 

 .class2{ 
 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
 }

设置很简单，对于文字阴影：表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px, 而阴影模糊半径 6px，颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值，负值则反方向。元素阴影也类似。

清单 20. 反射

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

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

九、CSS3 的背景效果

CSS3 多出了几种关于背景（background）的属性，我们这里会简单介绍一下：

首先：“Background Clip”，该属确定背景画区，有以下几种可能的属性：

* background-clip: border-box; 背景从 border 开始显示 ;

* background-clip: padding-box; 背景从 padding 开始显示 ;

* background-clip: content-box; 背景显 content 区域开始显示 ;

* background-clip: no-clip; 默认属性，等同于 border-box;

通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。

其次：“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。

* background-origin: border-box; 从 border. 开始计算 background-position;

* background-origin: padding-box; 从 padding. 开始计算 background-position;

* background-origin: content-box; 从 content. 开始计算 background-position;

还有，“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。有以下可能的属性：

* background-size: contain; 缩小图片以适合元素（维持像素长宽比）

* background-size: cover; 扩展元素以填补元素（维持像素长宽比）

* background-size: 100px 100px; 缩小图片至指定的大小 .

* background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸 .

最后，“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

* background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）

* background-break: bounding-box; 把盒之间的距离计算在内；

* background-break: each-box; 为每个盒子单独重绘背景。

这种属性让您可以设定复杂元素的背景属性。

最为重要的一点，CSS3 中支持多背景图片，参考如下代码：

清单 21. 多背景图片

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

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

 

十、CSS3 的盒子模型

盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。

下面我们来介绍一下他是如何工作的，参考如下代码：

清单 22. CSS3 盒子模型

 <div class="boxcontainer"> 
            <div class="item"> 
                1 
            </div> 
            <div class="item"> 
                2 
            </div> 
            <div class="item"> 
                3 
            </div> 
            <div class="item flex"> 
                4 
            </div> 
        </div>

默认情况下，如果“boxcontainer”和“item”两个 class 里面没有特殊属性的话，由于 div 是块状元素，所以他的排列应该是这样的：

 

清单 23. CSS3 盒子模型（水平排列）

 .boxcontainer { 
                width: 1000px; 
                display: -webkit-box; 
                display: -moz-box; 
                -webkit-box-orient: horizontal; 
                -moz-box-orient: horizontal; 
            } 
            
            .item { 
                background: #357c96; 
                font-weight: bold; 
                margin: 2px; 
                padding: 20px; 
                color: #fff; 
                font-family: Arial, sans-serif; 
            }

注意这里的“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。细心的读者会看到，“盒子”的右侧多出来了很大一块，这是怎么回事呢？让我们再来看一个比较有特点的属性：“flex”

清单 24. CSS3 盒子模型（flex）

 <div class="boxcontainer"> 
            <div class="item"> 
                1 
            </div> 
            <div class="item"> 
                2 
            </div> 
            <div class="item"> 
                3 
            </div> 
            <div class="item flex"> 
                4 
            </div> 
        </div> 

 .flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 }

您看到什么区别了没？在第四个“item 元素”那里多了一个“flex”属性，第四个“item 元素”填满了整个区域，这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值，并加入更多的元素，见如下代码：

清单 25. CSS3 盒子模型（flex 进阶）

 <div class="boxcontainer"> 
            <div class="item"> 
                1 
            </div> 
            <div class="item"> 
                2 
            </div> 
            <div class="item flex2"> 
                3 
            </div> 
            <div class="item flex"> 
                4 
            </div> 
        </div> 

 .flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 } 

 .flex2 { 
     -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
 }

我们把倒数第二个元素（元素 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

先说说 Transition，Transition 有下面些具体属性：

transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration：用于指定这个过渡的持续时间

transition-delay：用于制定延迟过渡的时间

transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

可能您觉得摸不着头脑，其实很简单，我们用一个例子说明，参看一下如下代码：

清单 26. CSS3 的 Transition

 <div id="transDiv" class="transStart"> transition </div> 

 .transStart { 
    background-color: white; 
    -webkit-transition: background-color 0.3s linear; 
    -moz-transition: background-color 0.3s linear; 
    -o-transition: background-color 0.3s linear; 
    transition: background-color 0.3s linear; 
 } 
 .transEnd { 
    background-color: red; 
 }

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

Transform

再来看看 Transform，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。见如下代码：

清单 27. CSS3 的 Transform

 .skew { 
 -webkit-transform: skew(50deg); 
 } 

 .scale { 
 -webkit-transform: scale(2, 0.5); 
 } 

 .rotate { 
 -webkit-transform: rotate(30deg); 
 } 

 .translate { 
 -webkit-transform: translate(50px, 50px); 
 } 

 .all_in_one_transform { 
 -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); 
 }

“skew”是倾斜，“scale”是缩放，“rotate”是旋转，“translate”是平移。最后需要说明一点，transform 支持综合变换。可见其效果图如下：

图 20. CSS3 的 Transform 效果图

现在您应该明白 Transform 的作用了吧。结合我们之前谈到的 Transition，将它们两者结合起来，会产生类似旋转，缩放等等的效果，绝对能令人耳目一新。

Animation

最后，我们来说说 Animation 吧。它可以说开辟了 CSS 的新纪元，让 CSS 脱离了“静止”这一约定俗成的前提。以 webkit 为例，见如下代码：

清单 28. CSS3 的 Animation

 @-webkit-keyframes anim1 { 
    0% { 
        Opacity: 0; 
 Font-size: 12px; 
    } 
    100% { 
        Opacity: 1; 
 Font-size: 24px; 
    } 
 } 
 .anim1Div { 
    -webkit-animation-name: anim1 ; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 4; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: ease-in-out; 
 }

First, define the content of the animation. As shown in Listing 28, define the animation "anim1". The change method is from "transparent" (opacity: 0) to "opacity" (opacity: 1). At the same time, the internal font size is changed from " 12px" changes to "24px". Then, define the change parameters of the animation. Among them, "duration" represents the duration of the animation, "iteration-count" represents the number of animation repetitions, and direction represents the way the direction changes after the animation is executed once (such as from right to left for the first time, the second time from left to right), and finally, "timing-function" represents the changing mode.

In fact, CSS3 animation supports almost all style changes and can define a variety of animation effects to meet the needs of our user experience.

Here, we introduce the main new features of CSS3. These features are basically supported in Chrome and Safari, Firefox supports some of them, and IE and Opera support less. Readers can use it selectively according to collective circumstances.