Heutzutage, mit der Popularität der Web2.0-Technologie, scheinen der bisherige CSS2-Standard und verwandte Technologien nicht in der Lage zu sein, den wachsenden Entwicklungsanforderungen gerecht zu werden: Die Menschen müssen eine schönere Benutzeroberfläche mit einer besseren Benutzererfahrung implementieren. Mit CSS3 entstand diese neue Generation von Standards. Um den bestehenden Entwicklungsanforderungen für Web-UI gerecht zu werden, bietet es eine Reihe leistungsstarker Funktionen, wie viele neue CSS-Eigenschaften (Text, Layout, Farbe usw.), verschiedene CSS-Spezialeffekte und unterstützt sogar CSS-Animationen und -Elemente. Verwandeln. Man kann sagen, dass diese neuen CSS-Funktionen zu diesem Zeitpunkt sehr leistungsfähig und vollständig sind. Sie müssen nur ein paar Zeilen einfachen CSS-Codes hinzufügen, um eine Reihe auffälliger Effekte zu erzielen, was viel besser ist als das, was wir zur Simulation verwendet haben Der Effekt ist viel besser, da nicht nur die Komplexität verringert und die Wartung erleichtert wird, sondern auch die Leistung sprunghaft verbessert wird. In diesem Artikel werden hauptsächlich die neuen Funktionen von CSS3 vorgestellt und einige Tipps zu seiner Verwendung gegeben.
Einführung:
CSS ist Cascading Stylesheet. CSS-Technologie wird in der Webentwicklung verwendet, um das Layout, Schriftarten, Farben, Hintergründe und andere Effekte der Seite effektiv zu steuern. Mit nur wenigen einfachen Änderungen können Sie das Aussehen und Format Ihrer Webseiten ändern. CSS3 ist eine aktualisierte Version von CSS. Dieser neue Satz von Standards bietet umfangreichere und praktischere Spezifikationen, wie zum Beispiel: Boxmodell, Listenmodul, Hyperlink-Methode, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout usw. Derzeit Es gibt viele Browser, die diese aktualisierte Spezifikation nacheinander unterstützt haben, z. B. Firefox, Chrome, Safari, Opera usw. Der Einsatz der CSS3-Technologie in der Webentwicklung wird unsere Anwendungen erheblich verschönern, das Benutzererlebnis verbessern und auch die Programmleistung erheblich verbessern. Dieser Artikel konzentriert sich auf einige der schöneren und praktischeren neuen CSS3-Funktionen.
Wer CSS geschrieben hat, sollte mit CSS-Selektoren vertraut sein. Der Grund, warum die von uns definierten CSS-Eigenschaften auf die entsprechenden Knoten angewendet werden können, liegt im CSS-Selektormodus. Beziehen Sie sich auf den folgenden Code:
Body > .mainTabContainer div > span[5]{
Border: 1px solod red;
Background-color: white;
Cursor: pointer;
}Der CSS-Selektor hier ist: „body > .mainTabContainer div span[5]“ stellt einen Pfad wie diesen dar:
1. Alle Elemente in den direkten untergeordneten Elementen des „body“-Tags, deren Klassenattributwert „mainTabContainer“ A ist
2. Alle Elemente mit der Bezeichnung div in den Nachkommen von A B
3. Das 5. Element C
, dessen Tag sich unter den direkten untergeordneten Elementen von B befindetDieses C-Element (möglicherweise mehrere) ist das vom Selektor positionierte Element, und die oben genannten CSS-Eigenschaften werden alle auf das C-Element angewendet.
Die oben genannten sind die wichtigsten Positionierungsmethoden, die von CSS2 und früheren Versionen bereitgestellt werden. Jetzt bietet CSS3 bequemere und schnellere Selektoren:
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;
}Wie oben gezeigt, haben wir einige CSS3-Selektoren aufgelistet, die in unserer täglichen Entwicklung häufig verwendet werden können. Diese neuen CSS3-Funktionen lösen viele Probleme, für deren Lösung wir zuvor JavaScript-Skripte verwenden mussten.
tbody: n-tes Kind (gerade), n-tes Kind (ungerade): Hier stellen sie die geraden Zeilen bzw. ungeraden Zeilen (tr) unter der Tabelle (tbody) dar. Dieser Stil eignet sich sehr gut für Tabellen und macht Menschen zu einem Unterschiede zwischen den Zeilen der Tabelle sind deutlich zu erkennen und erleichtern dem Benutzer das Durchsuchen.
: not(.textinput): Damit sind alle Knoten gemeint, deren Klasse nicht „textinput“ ist.
div:first-child: Dies stellt den ersten direkten untergeordneten Knoten unter allen div-Knoten dar.
Darüber hinaus gibt es viele neu hinzugefügte Selektoren:
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)
Ich werde sie hier nicht einzeln vorstellen. Wenn wir lernen, diese neuen Funktionen zu nutzen, können wir unsere Angst vor Code erheblich verringern und die Programmleistung erheblich verbessern.
Font-face kann zum Laden von Schriftarten verwendet werden und es kann auch serverseitige Schriftartdateien laden, sodass der Client Schriftarten anzeigen kann, die nicht auf dem Client installiert sind.
Sehen wir uns zunächst einen einfachen Fall einer Client-Schriftart an:
<p><font face="arial">arial courier verdana</font></p>
Auf diese Weise können wir Schriftstile direkt laden, da diese Schriftarten (Arial) bereits auf dem Client installiert sind. Listing 3 Diese Schreibweise entspricht Listing 4:
<p><font style="font-family: arial">arial courier verdana</font></p>
Ich glaube, dass diese Schreibmethode jedem bekannt sein sollte.
Als nächstes schauen wir uns an, wie man serverseitige Schriftarten verwendet, also Schriftarten, die nicht auf dem Client installiert sind.
Siehe folgenden Code:
@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 属性，参考下述代码：
<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”，设置或检索当当前行超过指定容器的边界时是否断开转行，文字此时已被打散。所以可见如下的差别：
知道了 word-wrap 的原理，我们再来看看 text-overflow，其实它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 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 方式比较传统，我们可以依据需求进行选择。
CSS3 里面开始支持对文字的更深层次的渲染，我们来看看下面的例子：
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 现在已经可以做简单的布局处理了，这个 CSS3 新特性又一次的减少了我们的 JavaScript 代码量，参考如下代码：
.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：表示列于列之间的间隔
关于颜色，CSS3 已经提供透明度的支持了：
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
这里的“rgba”属性中的“a”代表透明度，也就是这里的“0.75”，同时 CSS3 还支持 HSL 颜色声明方式及其透明度：
color: hsla( 112, 72%, 33%, 0.68);
对于 border，CSS3 提供了圆角的支持：
border-radius: 15px;
左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。
同理，也可以有从上到下，任何颜色间的渐变转换：
还有复杂一点的渐变，如：水平渐变，33% 处为绿色，66% 处为橙色：
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），这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子：
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，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：
backgroud: -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
这里我们给目标圆半径为 10会有一个半径为 10 的纯蓝的圆在最中间，这就是设置目标圆半径的效果。
现在我再改变一下，不再是同心圆了，内圆圆心向右 20px 偏移。
backgroud: -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
这里我们给目标圆半径还是 10，但是圆心偏移为“70，50”（起始圆圆心为“50，50”）
想必您明白原理了，我们可以做一个来自顶部的漫射光，类似于开了盏灯：
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
首先来说说阴影效果，阴影效果既可用于普通元素，也可用于文字，参考如下代码：
.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)。其中偏移量可以为负值，负值则反方向。元素阴影也类似。
.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 多出了几种关于背景（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 中支持多背景图片，参考如下代码：
div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;
}此为同一元素两个背景的案例，其中一个重复显示，一个不重复。参考一下效果图：
盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。
下面我们来介绍一下他是如何工作的，参考如下代码：
<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 是块状元素，所以他的排列应该是这样的：
.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”
<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”的属性值，并加入更多的元素，见如下代码：
<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”来设定。
先说说 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
可能您觉得摸不着头脑，其实很简单，我们用一个例子说明，参看一下如下代码：
<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，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。见如下代码：
.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 支持综合变换。可见其效果图如下：
现在您应该明白 Transform 的作用了吧。结合我们之前谈到的 Transition，将它们两者结合起来，会产生类似旋转，缩放等等的效果，绝对能令人耳目一新。
最后，我们来说说 Animation 吧。它可以说开辟了 CSS 的新纪元，让 CSS 脱离了“静止”这一约定俗成的前提。以 webkit 为例，见如下代码：
@-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;
}Definieren Sie zunächst den Inhalt der Animation, wie in Listing 28 gezeigt. Die Änderungsmethode ist von „transparent“ (Opazität: 1). Gleichzeitig wurde die interne Schriftgröße von „12px“ auf „24px“ geändert. Definieren Sie dann die Änderungsparameter der Animation. Darunter stellt „Dauer“ die Dauer der Animation dar, „Iterationsanzahl“ stellt die Anzahl der Animationswiederholungen dar und Richtung stellt die Art und Weise dar, wie sich die Richtung ändert, nachdem die Animation einmal ausgeführt wurde ( zum Beispiel von rechts nach links zum ersten Mal, das zweite Mal von links nach rechts) und schließlich stellt „Timing-Funktion“ den Änderungsmodus dar.
Tatsächlich unterstützt CSS3-Animation fast alle Stiländerungen und kann eine Vielzahl von Animationseffekten definieren, um den Anforderungen unserer Benutzererfahrung gerecht zu werden.
Hier stellen wir die wichtigsten neuen Funktionen von CSS3 vor. Diese Funktionen werden grundsätzlich in Chrome und Safari unterstützt, Firefox unterstützt einige davon und IE und Opera unterstützen weniger. Die Leser können wählen, ob sie es entsprechend der kollektiven Situation verwenden möchten.
