Heim > Artikel > Web-Frontend > 60 nützliche CSS-Code-Snippets

60 nützliche CSS-Code-Snippets

WBOYOriginal: 2016-10-22 00:00:141813Durchsuche

1. Vertikale Ausrichtung

Wenn Sie CSS verwenden, werden Sie verwirrt sein: Wie soll ich die Elemente im Container vertikal ausrichten? Mit CSS3s Transform können Sie diese Verwirrung nun ganz elegant lösen:

<code class="css"><span class="hljs-class">.verticalcenter<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">50%;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-transform:<span class="hljs-value"> <span class="hljs-function">translateY(-<span class="hljs-number">50%);
    <span class="hljs-rule"><span class="hljs-attribute">-o-transform:<span class="hljs-value"> <span class="hljs-function">translateY(-<span class="hljs-number">50%);
    <span class="hljs-rule"><span class="hljs-attribute">transform:<span class="hljs-value"> <span class="hljs-function">translateY(-<span class="hljs-number">50%);
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

Verwenden Sie diese Technik, um alles vertikal auszurichten, von einzelnen Textzeilen über Absätze bis hin zu Kästchen. Derzeit erfordert die Browserunterstützung für Transform
, Chrome 4, Opera 10, Safari 3 alle dieses AttributFirefox 3 and Internet Explorer 92. Strecken Sie ein Element auf Fensterhöhe

In bestimmten Szenarien möchten Sie möglicherweise ein Element auf die Höhe des Fensters strecken. Durch die Anpassung grundlegender Elemente kann nur die Größe des Containers angepasst werden, sodass ein Element auf die Höhe des Fensters gedehnt werden kann.

Wir müssen das Element der obersten Ebene strecken:

und
:html body

Dann wenden Sie

<code class="css"><span class="hljs-tag">html, 
<span class="hljs-tag">body <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">100%;
}</span></span></span></span></span></span></span></code>

auf die Höhe eines beliebigen Elements

an 100%

3. Verwenden Sie je nach Dateiformat unterschiedliche Stile

<code class="css"><span class="hljs-tag">div <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">100%;
}</span></span></span></span></span></span></code>

Um einfacher zu erkennen, wohin ein Link führt, möchten Sie manchmal, dass einige Links anders aussehen als andere. Das folgende Snippet fügt vor einem Textlink ein Symbol hinzu und verwendet dabei unterschiedliche Symbole oder Bilder für unterschiedliche Ressourcen:

Wirkungsdemonstration

<code class="css"><span class="hljs-tag">a<span class="hljs-attr_selector">[href^="http://"]<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(external.gif) no-repeat center right;
}
<span class="hljs-comment">/* emails */
<span class="hljs-tag">a<span class="hljs-attr_selector">[href^="mailto:"]<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(email.png) no-repeat center right;
}

<span class="hljs-comment">/* pdfs */
<span class="hljs-tag">a<span class="hljs-attr_selector">[href$=".pdf"]<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(pdf.png) no-repeat center right;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

4. Erstellen Sie ein browserübergreifendes Graustufenbild

Graustufen können manchmal minimalistisch und elegant wirken und einer Website einen tieferen Ton verleihen. Im Beispiel fügen wir einem SVG-Bild eine Graustufenfilterung hinzu:

Um browserübergreifend zu sein, wird das Attribut

<code class="xml"><span class="hljs-tag"><<span class="hljs-title">svg <span class="hljs-attribute">xmlns=<span class="hljs-value">"http://www.w3.org/2000/svg">
    <span class="hljs-tag"><<span class="hljs-title">filter <span class="hljs-attribute">id=<span class="hljs-value">"grayscale">
        <span class="hljs-tag"><<span class="hljs-title">feColorMatrix <span class="hljs-attribute">type=<span class="hljs-value">"matrix" <span class="hljs-attribute">values=<span class="hljs-value">"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    <span class="hljs-tag"></<span class="hljs-title">filter>
<span class="hljs-tag"></<span class="hljs-title">svg></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

verwendet:

filter

5. Hintergrundverlaufsanimation

<code class="css"><span class="hljs-tag">img <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">filter:<span class="hljs-value"> <span class="hljs-function">url(filters.svg#grayscale); <span class="hljs-comment">/* Firefox 3.5+ */
    <span class="hljs-rule"><span class="hljs-attribute">filter:<span class="hljs-value"> gray; <span class="hljs-comment">/* IE6-9 */
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-filter:<span class="hljs-value"> <span class="hljs-function">grayscale(<span class="hljs-number">1); <span class="hljs-comment">/* Google Chrome, Safari 6+ & Opera 15+ */
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

Eine der verlockendsten Funktionen von

ist die Möglichkeit, neben Farbverläufen auch Animationen zur Hintergrundfarbe, Transparenz und Elementgröße hinzuzufügen. Derzeit können Sie keine Farbverläufe animieren, der folgende Code kann jedoch hilfreich sein. Dadurch wird die Position des Hintergrunds geändert, sodass er animiert aussieht.

CSS

Wirkungsdemonstration:

<code class="css"><span class="hljs-tag">button <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">linear-gradient(<span class="hljs-hexcolor">#5187c4, <span class="hljs-hexcolor">#1c2f45);
    <span class="hljs-rule"><span class="hljs-attribute">background-size:<span class="hljs-value"> auto <span class="hljs-number">200%;
    <span class="hljs-rule"><span class="hljs-attribute">background-position:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">100%;
    <span class="hljs-rule"><span class="hljs-attribute">transition:<span class="hljs-value"> background-position <span class="hljs-number">0.5s;
}    
<span class="hljs-rule"><span class="hljs-attribute">button:<span class="hljs-value">hover {
    background-position: <span class="hljs-number">0 <span class="hljs-number">0;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

6. CSS: Tabellenspaltenbreite ist selbstanpassend

Bei Tabellen ist das Anpassen der Spaltenbreite schwieriger. Dann ist hier ein Trick, den Sie anwenden können: Durch Hinzufügen von

zum

-Element wird der Text korrekt umbrochen td white-space: nowrap;

Demo

<code class="css"><span class="hljs-tag">td <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> nowrap;
}</span></span></span></span></span></code>

7. Schatten der Anzeigebox nur auf einer oder beiden Seiten

Wenn Sie einen Kastenschatten wünschen, versuchen Sie diesen Trick, um auf beiden Seiten Schatten hinzuzufügen. Um dies zu erreichen, definieren Sie zunächst ein Feld mit einer bestimmten Breite und Höhe und positionieren Sie dann die Pseudoklasse

richtig. Der Code zum Implementieren des unteren Schattens lautet wie folgt

:after

Demo

<code class="css"><span class="hljs-class">.box-shadow <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> <span class="hljs-hexcolor">#FF8020;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">160px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">90px;
    <span class="hljs-rule"><span class="hljs-attribute">margin-top:<span class="hljs-value"> -<span class="hljs-number">45px;
    <span class="hljs-rule"><span class="hljs-attribute">margin-left:<span class="hljs-value"> -<span class="hljs-number">80px;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">50%;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">50%;
}
<span class="hljs-rule"><span class="hljs-attribute">.box-shadow:<span class="hljs-value">after {
    content: <span class="hljs-string">"";
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">150px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">1px;
    <span class="hljs-rule"><span class="hljs-attribute">margin-top:<span class="hljs-value"> <span class="hljs-number">88px;
    <span class="hljs-rule"><span class="hljs-attribute">margin-left:<span class="hljs-value"> -<span class="hljs-number">75px;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">50%;
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> -<span class="hljs-number">1;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">8px <span class="hljs-number">2px <span class="hljs-hexcolor">#000000;
       <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">8px <span class="hljs-number">2px <span class="hljs-hexcolor">#000000;
            <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">8px <span class="hljs-number">2px <span class="hljs-hexcolor">#000000;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

8. Langtext umbrechen

Dieser Trick kann nützlich sein, wenn Sie auf einen Text stoßen, der länger als sein eigener Container ist. In diesem Beispiel wird der Text standardmäßig horizontal gefüllt, unabhängig von der Breite des Containers.

Einfacher

Code zum Anpassen des Textes im Container:

CSS

Der Effekt sieht so aus:

<code class="css"><span class="hljs-tag">pre <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> pre-line;
    <span class="hljs-rule"><span class="hljs-attribute">word-wrap:<span class="hljs-value"> break-word;
}</span></span></span></span></span></span></span></span></code>

9、制造模糊文本

想要让文本模糊？可以使用color透明和text-shadow实现

<code class="css"><span class="hljs-class">.blurry-text <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> transparent;
   <span class="hljs-rule"><span class="hljs-attribute">text-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">5px <span class="hljs-function">rgba(<span class="hljs-number">0,<span class="hljs-number">0,<span class="hljs-number">0,<span class="hljs-number">0.5);
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

演示

10、用CSS动画实现省略号动画

这个片段将帮助你制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">.loading:<span class="hljs-value">after {
    overflow: hidden;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> inline-block;
    <span class="hljs-rule"><span class="hljs-attribute">vertical-align:<span class="hljs-value"> bottom;
    <span class="hljs-rule"><span class="hljs-attribute">animation:<span class="hljs-value"> ellipsis <span class="hljs-number">2s infinite;
    <span class="hljs-rule"><span class="hljs-attribute">content:<span class="hljs-value"> <span class="hljs-string">"\2026"; <span class="hljs-comment">/* ascii code for the ellipsis character */
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes ellipsis {
    <span class="hljs-tag">from <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">2px;
    }
    <span class="hljs-tag">to <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">15px;
    }
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

演示

11、样式重置

<code class="css"><span class="hljs-tag">html, <span class="hljs-tag">body, <span class="hljs-tag">div, <span class="hljs-tag">span, <span class="hljs-tag">applet, <span class="hljs-tag">object, <span class="hljs-tag">iframe, <span class="hljs-tag">h1, <span class="hljs-tag">h2, <span class="hljs-tag">h3, <span class="hljs-tag">h4, <span class="hljs-tag">h5, <span class="hljs-tag">h6, <span class="hljs-tag">p, <span class="hljs-tag">blockquote, <span class="hljs-tag">pre, <span class="hljs-tag">a, <span class="hljs-tag">abbr, <span class="hljs-tag">acronym, <span class="hljs-tag">address, <span class="hljs-tag">big, <span class="hljs-tag">cite, <span class="hljs-tag">code, <span class="hljs-tag">del, <span class="hljs-tag">dfn, <span class="hljs-tag">em, <span class="hljs-tag">img, <span class="hljs-tag">ins, <span class="hljs-tag">kbd, <span class="hljs-tag">q, <span class="hljs-tag">s, <span class="hljs-tag">samp, <span class="hljs-tag">small, <span class="hljs-tag">strike, <span class="hljs-tag">strong, <span class="hljs-tag">sub, <span class="hljs-tag">sup, <span class="hljs-tag">tt, <span class="hljs-tag">var, <span class="hljs-tag">b, <span class="hljs-tag">u, <span class="hljs-tag">i, <span class="hljs-tag">center, <span class="hljs-tag">dl, <span class="hljs-tag">dt, <span class="hljs-tag">dd, <span class="hljs-tag">ol, <span class="hljs-tag">ul, <span class="hljs-tag">li, <span class="hljs-tag">fieldset, <span class="hljs-tag">form, <span class="hljs-tag">label, <span class="hljs-tag">legend, <span class="hljs-tag">table, <span class="hljs-tag">caption, <span class="hljs-tag">tbody, <span class="hljs-tag">tfoot, <span class="hljs-tag">thead, <span class="hljs-tag">tr, <span class="hljs-tag">th, <span class="hljs-tag">td, <span class="hljs-tag">article, <span class="hljs-tag">aside, <span class="hljs-tag">canvas, <span class="hljs-tag">details, <span class="hljs-tag">embed, <span class="hljs-tag">figure, <span class="hljs-tag">figcaption, <span class="hljs-tag">footer, <span class="hljs-tag">header, <span class="hljs-tag">hgroup, <span class="hljs-tag">menu, <span class="hljs-tag">nav, <span class="hljs-tag">output, <span class="hljs-tag">ruby, <span class="hljs-tag">section, <span class="hljs-tag">summary, <span class="hljs-tag">time, <span class="hljs-tag">mark, <span class="hljs-tag">audio, <span class="hljs-tag">video <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">100%;
  <span class="hljs-rule"><span class="hljs-attribute">font:<span class="hljs-value"> inherit;
  <span class="hljs-rule"><span class="hljs-attribute">vertical-align:<span class="hljs-value"> baseline;
  <span class="hljs-rule"><span class="hljs-attribute">outline:<span class="hljs-value"> none;
  <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-sizing:<span class="hljs-value"> border-box;
  <span class="hljs-rule"><span class="hljs-attribute">-moz-box-sizing:<span class="hljs-value"> border-box;
  <span class="hljs-rule"><span class="hljs-attribute">box-sizing:<span class="hljs-value"> border-box;
}
<span class="hljs-tag">html <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">101%; }
<span class="hljs-tag">body <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">62.5%; <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1; <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Arial, Tahoma, sans-serif; }
<span class="hljs-tag">article, <span class="hljs-tag">aside, <span class="hljs-tag">details, <span class="hljs-tag">figcaption, <span class="hljs-tag">figure, <span class="hljs-tag">footer, <span class="hljs-tag">header, <span class="hljs-tag">hgroup, <span class="hljs-tag">menu, <span class="hljs-tag">nav, <span class="hljs-tag">section <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block; }
<span class="hljs-tag">ol, <span class="hljs-tag">ul <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">list-style:<span class="hljs-value"> none; }
<span class="hljs-tag">blockquote, <span class="hljs-tag">q <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">quotes:<span class="hljs-value"> none; }
<span class="hljs-rule"><span class="hljs-attribute">blockquote:<span class="hljs-value">before, blockquote:after, q:before, q:after { content: <span class="hljs-string">''; <span class="hljs-rule"><span class="hljs-attribute">content:<span class="hljs-value"> none; }
<span class="hljs-tag">strong <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> bold; } 
<span class="hljs-tag">table <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">border-collapse:<span class="hljs-value"> collapse; <span class="hljs-rule"><span class="hljs-attribute">border-spacing:<span class="hljs-value"> <span class="hljs-number">0; }
<span class="hljs-tag">img <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">0; <span class="hljs-rule"><span class="hljs-attribute">max-width:<span class="hljs-value"> <span class="hljs-number">100%; }
<span class="hljs-tag">p <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">1.2em; <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.0em; <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#333; }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

12、典型的CSS清除浮动

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">.clearfix:<span class="hljs-value">after { content: <span class="hljs-string">"."; <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block; <span class="hljs-rule"><span class="hljs-attribute">clear:<span class="hljs-value"> both; <span class="hljs-rule"><span class="hljs-attribute">visibility:<span class="hljs-value"> hidden; <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">0; <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">0; }
<span class="hljs-class">.clearfix <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> inline-block; }
<span class="hljs-tag">html<span class="hljs-attr_selector">[xmlns] <span class="hljs-class">.clearfix <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block; }
* <span class="hljs-tag">html <span class="hljs-class">.clearfix <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">1%; }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

13、新版清除浮动（2011）

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">.clearfix:<span class="hljs-value">before, .container:after { content: <span class="hljs-string">""; <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> table; }
<span class="hljs-rule"><span class="hljs-attribute">.clearfix:<span class="hljs-value">after { clear: both; }
<span class="hljs-comment">/* IE 6/7 */
<span class="hljs-class">.clearfix <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">zoom:<span class="hljs-value"> <span class="hljs-number">1; }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

14、跨浏览器的透明

<code class="css"><span class="hljs-class">.transparent <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">filter:<span class="hljs-value"> <span class="hljs-function">alpha(opacity=<span class="hljs-number">50); <span class="hljs-comment">/* internet explorer */
    <span class="hljs-rule"><span class="hljs-attribute">-khtml-opacity:<span class="hljs-value"> <span class="hljs-number">0.5;      <span class="hljs-comment">/* khtml, old safari */
    <span class="hljs-rule"><span class="hljs-attribute">-moz-opacity:<span class="hljs-value"> <span class="hljs-number">0.5;       <span class="hljs-comment">/* mozilla, netscape */
    <span class="hljs-rule"><span class="hljs-attribute">opacity:<span class="hljs-value"> <span class="hljs-number">0.5;           <span class="hljs-comment">/* fx, safari, opera */
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

15、CSS引用模板

<code class="css"><span class="hljs-tag">blockquote <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#f9f9f9;
    <span class="hljs-rule"><span class="hljs-attribute">border-left:<span class="hljs-value"> <span class="hljs-number">10px solid <span class="hljs-hexcolor">#ccc;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">1.5em <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> .<span class="hljs-number">5em <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">quotes:<span class="hljs-value"> <span class="hljs-string">"\201C"<span class="hljs-string">"\201D"<span class="hljs-string">"\2018"<span class="hljs-string">"\2019";
}
<span class="hljs-rule"><span class="hljs-attribute">blockquote:<span class="hljs-value">before {
    color: <span class="hljs-hexcolor">#ccc;
    <span class="hljs-rule"><span class="hljs-attribute">content:<span class="hljs-value"> open-quote;
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">4em;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> .<span class="hljs-number">1em;
    <span class="hljs-rule"><span class="hljs-attribute">margin-right:<span class="hljs-value"> .<span class="hljs-number">25em;
    <span class="hljs-rule"><span class="hljs-attribute">vertical-align:<span class="hljs-value"> -.<span class="hljs-number">4em;
}
<span class="hljs-tag">blockquote <span class="hljs-tag">p <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> inline;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

16、个性圆角

<code class="css"><span class="hljs-id">#container <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius:<span class="hljs-value"> <span class="hljs-number">4px <span class="hljs-number">3px <span class="hljs-number">6px <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius:<span class="hljs-value"> <span class="hljs-number">4px <span class="hljs-number">3px <span class="hljs-number">6px <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">-o-border-radius:<span class="hljs-value"> <span class="hljs-number">4px <span class="hljs-number">3px <span class="hljs-number">6px <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">border-radius:<span class="hljs-value"> <span class="hljs-number">4px <span class="hljs-number">3px <span class="hljs-number">6px <span class="hljs-number">10px;
}
<span class="hljs-comment">/* alternative syntax broken into each line */
<span class="hljs-id">#container <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-top-left-radius:<span class="hljs-value"> <span class="hljs-number">4px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-top-right-radius:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-bottom-right-radius:<span class="hljs-value"> <span class="hljs-number">6px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-bottom-left-radius:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius-topleft:<span class="hljs-value"> <span class="hljs-number">4px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius-topright:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius-bottomright:<span class="hljs-value"> <span class="hljs-number">6px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius-bottomleft:<span class="hljs-value"> <span class="hljs-number">10px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

17、通用媒体查询

<code class="css"><span class="hljs-comment">/* Smartphones (portrait and landscape) ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen 
and (min-device-width : <span class="hljs-number">320px) and (max-device-width : <span class="hljs-number">480px) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* Smartphones (landscape) ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (min-width : <span class="hljs-number">321px) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* Smartphones (portrait) ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (max-width : <span class="hljs-number">320px) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* iPads (portrait and landscape) ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (min-device-width : <span class="hljs-number">768px) and (max-device-width : <span class="hljs-number">1024px) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* iPads (landscape) ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (min-device-width : <span class="hljs-number">768px) and (max-device-width : <span class="hljs-number">1024px) and (orientation : landscape) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* iPads (portrait) ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (min-device-width : <span class="hljs-number">768px) and (max-device-width : <span class="hljs-number">1024px) and (orientation : portrait) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* Desktops and laptops ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (min-width : <span class="hljs-number">1224px) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* Large screens ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (min-width : <span class="hljs-number">1824px) {
  <span class="hljs-comment">/* Styles */
}
<span class="hljs-comment">/* iPhone 4 ----------- */
<span class="hljs-at_rule">@<span class="hljs-keyword">media only screen and (-webkit-min-device-pixel-ratio:<span class="hljs-number">1.5), only screen and (min-device-pixel-ratio:<span class="hljs-number">1.5) {
  <span class="hljs-comment">/* Styles */
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

18、现代字体栈

<code class="css"><span class="hljs-comment">/* Times New Roman-based serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Cambria, <span class="hljs-string">"Hoefler Text", Utopia, <span class="hljs-string">"Liberation Serif", <span class="hljs-string">"Nimbus Roman No9 L Regular", Times, <span class="hljs-string">"Times New Roman", serif;
<span class="hljs-comment">/* A modern Georgia-based serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Constantia, <span class="hljs-string">"Lucida Bright", Lucidabright, <span class="hljs-string">"Lucida Serif", Lucida, <span class="hljs-string">"DejaVu Serif," <span class="hljs-string">"Bitstream Vera Serif", <span class="hljs-string">"Liberation Serif", Georgia, serif;
<span class="hljs-comment">/*A more traditional Garamond-based serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> <span class="hljs-string">"Palatino Linotype", Palatino, Palladio, <span class="hljs-string">"URW Palladio L", <span class="hljs-string">"Book Antiqua", Baskerville, <span class="hljs-string">"Bookman Old Style", <span class="hljs-string">"Bitstream Charter", <span class="hljs-string">"Nimbus Roman No9 L", Garamond, <span class="hljs-string">"Apple Garamond", <span class="hljs-string">"ITC Garamond Narrow", <span class="hljs-string">"New Century Schoolbook", <span class="hljs-string">"Century Schoolbook", <span class="hljs-string">"Century Schoolbook L", Georgia, serif;
<span class="hljs-comment">/*The Helvetica/Arial-based sans serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Frutiger, <span class="hljs-string">"Frutiger Linotype", Univers, Calibri, <span class="hljs-string">"Gill Sans", <span class="hljs-string">"Gill Sans MT", <span class="hljs-string">"Myriad Pro", Myriad, <span class="hljs-string">"DejaVu Sans Condensed", <span class="hljs-string">"Liberation Sans", <span class="hljs-string">"Nimbus Sans L", Tahoma, Geneva, <span class="hljs-string">"Helvetica Neue", Helvetica, Arial, sans-serif;
<span class="hljs-comment">/*The Verdana-based sans serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Corbel, <span class="hljs-string">"Lucida Grande", <span class="hljs-string">"Lucida Sans Unicode", <span class="hljs-string">"Lucida Sans", <span class="hljs-string">"DejaVu Sans", <span class="hljs-string">"Bitstream Vera Sans", <span class="hljs-string">"Liberation Sans", Verdana, <span class="hljs-string">"Verdana Ref", sans-serif;
<span class="hljs-comment">/*The Trebuchet-based sans serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> <span class="hljs-string">"Segoe UI", Candara, <span class="hljs-string">"Bitstream Vera Sans", <span class="hljs-string">"DejaVu Sans", <span class="hljs-string">"Bitstream Vera Sans", <span class="hljs-string">"Trebuchet MS", Verdana, <span class="hljs-string">"Verdana Ref", sans-serif;
<span class="hljs-comment">/*The heavier "Impact" sans serif */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Impact, Haettenschweiler, <span class="hljs-string">"Franklin Gothic Bold", Charcoal, <span class="hljs-string">"Helvetica Inserat", <span class="hljs-string">"Bitstream Vera Sans Bold", <span class="hljs-string">"Arial Black", sans-serif;
<span class="hljs-comment">/*The monospace */
<span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Consolas, <span class="hljs-string">"Andale Mono WT", <span class="hljs-string">"Andale Mono", <span class="hljs-string">"Lucida Console", <span class="hljs-string">"Lucida Sans Typewriter", <span class="hljs-string">"DejaVu Sans Mono", <span class="hljs-string">"Bitstream Vera Sans Mono", <span class="hljs-string">"Liberation Mono", <span class="hljs-string">"Nimbus Mono L", Monaco, <span class="hljs-string">"Courier New", Courier, monospace;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

19、自定义文本选择

<code class="css"><span class="hljs-pseudo">::selection <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#e2eae2; }
<span class="hljs-pseudo">::-moz-selection <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#e2eae2; }
<span class="hljs-pseudo">::-webkit-selection <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#e2eae2; }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

20、为logo隐藏H1

<code class="css"><span class="hljs-tag">h1 <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">text-indent:<span class="hljs-value"> -<span class="hljs-number">9999px;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0 auto;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">320px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">85px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> transparent <span class="hljs-function">url(<span class="hljs-string">"images/logo.png") no-repeat scroll;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

21、图片边框偏光

<code class="css"><span class="hljs-tag">img<span class="hljs-class">.polaroid <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"><span class="hljs-hexcolor">#000; <span class="hljs-comment">/*Change this to a background image or remove*/
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value">solid <span class="hljs-hexcolor">#fff;
    <span class="hljs-rule"><span class="hljs-attribute">border-width:<span class="hljs-value"><span class="hljs-number">6px <span class="hljs-number">6px <span class="hljs-number">20px <span class="hljs-number">6px;
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"><span class="hljs-number">1px <span class="hljs-number">1px <span class="hljs-number">5px <span class="hljs-hexcolor">#333; <span class="hljs-comment">/* Standard blur at 5px. Increase for more depth */
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"><span class="hljs-number">1px <span class="hljs-number">1px <span class="hljs-number">5px <span class="hljs-hexcolor">#333;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"><span class="hljs-number">1px <span class="hljs-number">1px <span class="hljs-number">5px <span class="hljs-hexcolor">#333;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"><span class="hljs-number">200px; <span class="hljs-comment">/*Set to height of your image or desired div*/
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"><span class="hljs-number">200px; <span class="hljs-comment">/*Set to width of your image or desired div*/
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

22、锚链接伪类

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">link { color: blue; }
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">visited { color: purple; }
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">hover { color: red; }
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">active { color: yellow; }</span></span></span></span></span></span></span></span></span></span></span></span></code>

23、奇特的CSS引用

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">.has-pullquote:<span class="hljs-value">before {
    <span class="hljs-comment">/* Reset metrics. */
    padding: <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> none;
    <span class="hljs-comment">/* Content */
    <span class="hljs-rule"><span class="hljs-attribute">content:<span class="hljs-value"> <span class="hljs-function">attr(data-pullquote);
    <span class="hljs-comment">/* Pull out to the right, modular scale based margins. */
    <span class="hljs-rule"><span class="hljs-attribute">float:<span class="hljs-value"> right;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">320px;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">12px -<span class="hljs-number">140px <span class="hljs-number">24px <span class="hljs-number">36px;
    <span class="hljs-comment">/* Baseline correction */
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">5px;
    <span class="hljs-comment">/* Typography (30px line-height equals 25% incremental leading) */
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">23px;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">30px;
}
<span class="hljs-rule"><span class="hljs-attribute">.pullquote-adelle:<span class="hljs-value">before {
    font-family: <span class="hljs-string">"adelle-1", <span class="hljs-string">"adelle-2";
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> <span class="hljs-number">100;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">10px <span class="hljs-important">!important;
}
<span class="hljs-rule"><span class="hljs-attribute">.pullquote-helvetica:<span class="hljs-value">before {
    font-family: <span class="hljs-string">"Helvetica Neue", Arial, sans-serif;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> bold;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">7px <span class="hljs-important">!important;
}
<span class="hljs-rule"><span class="hljs-attribute">.pullquote-facit:<span class="hljs-value">before {
    font-family: <span class="hljs-string">"facitweb-1", <span class="hljs-string">"facitweb-2", Helvetica, Arial, sans-serif;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> bold;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">7px <span class="hljs-important">!important;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

24、CSS3：全屏背景

<code class="css"><span class="hljs-tag">html <span class="hljs-rules">{ 
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">'images/bg.jpg') no-repeat center center fixed; 
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-background-size:<span class="hljs-value"> cover;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-background-size:<span class="hljs-value"> cover;
    <span class="hljs-rule"><span class="hljs-attribute">-o-background-size:<span class="hljs-value"> cover;
    <span class="hljs-rule"><span class="hljs-attribute">background-size:<span class="hljs-value"> cover;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

25、内容垂直居中

<code class="css"><span class="hljs-class">.container <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">min-height:<span class="hljs-value"> <span class="hljs-number">6.5em;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> table-cell;
    <span class="hljs-rule"><span class="hljs-attribute">vertical-align:<span class="hljs-value"> middle;
}</span></span></span></span></span></span></span></span></span></span></span></span></code>

26、强制出现垂直滚动条

<code class="css"><span class="hljs-tag">html <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">101% }</span></span></span></span></span></span></code>

27、CSS3渐变模板

<code class="css"><span class="hljs-id">#colorbox <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#629721;
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">-webkit-gradient(linear, left top, left bottom, <span class="hljs-function">from(<span class="hljs-hexcolor">#83b842), <span class="hljs-function">to(<span class="hljs-hexcolor">#629721));
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">-webkit-linear-gradient(top, <span class="hljs-hexcolor">#83b842, <span class="hljs-hexcolor">#629721);
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">-moz-linear-gradient(top, <span class="hljs-hexcolor">#83b842, <span class="hljs-hexcolor">#629721);
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">-ms-linear-gradient(top, <span class="hljs-hexcolor">#83b842, <span class="hljs-hexcolor">#629721);
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">-o-linear-gradient(top, <span class="hljs-hexcolor">#83b842, <span class="hljs-hexcolor">#629721);
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">linear-gradient(top, <span class="hljs-hexcolor">#83b842, <span class="hljs-hexcolor">#629721);
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

28、@font-face模板

<code class="css"><span class="hljs-at_rule">@<span class="hljs-keyword">font-face <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> <span class="hljs-string">'MyWebFont';
    <span class="hljs-rule"><span class="hljs-attribute">src:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">'webfont.eot'); <span class="hljs-comment">/* IE9 Compat Modes */
    <span class="hljs-rule"><span class="hljs-attribute">src:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">'webfont.eot?#iefix') <span class="hljs-function">format(<span class="hljs-string">'embedded-opentype'), <span class="hljs-comment">/* IE6-IE8 */
    <span class="hljs-function">url(<span class="hljs-string">'webfont.woff') <span class="hljs-function">format(<span class="hljs-string">'woff'), <span class="hljs-comment">/* Modern Browsers */
    <span class="hljs-function">url(<span class="hljs-string">'webfont.ttf')  <span class="hljs-function">format(<span class="hljs-string">'truetype'), <span class="hljs-comment">/* Safari, Android, iOS */
    <span class="hljs-function">url(<span class="hljs-string">'webfont.svg#svgFontName') <span class="hljs-function">format(<span class="hljs-string">'svg'); <span class="hljs-comment">/* Legacy iOS */
}
<span class="hljs-tag">body <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> <span class="hljs-string">'MyWebFont', Arial, sans-serif;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

29、缝合CSS3元素

<code class="css"><span class="hljs-tag">p <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value">relative;
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"><span class="hljs-number">1;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">21px;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.3em;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#fff;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#ff0030;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">4px <span class="hljs-hexcolor">#ff0030, <span class="hljs-number">2px <span class="hljs-number">1px <span class="hljs-number">4px <span class="hljs-number">4px <span class="hljs-function">rgba(<span class="hljs-number">10,<span class="hljs-number">10,<span class="hljs-number">0,.<span class="hljs-number">5);
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">4px <span class="hljs-hexcolor">#ff0030, <span class="hljs-number">2px <span class="hljs-number">1px <span class="hljs-number">4px <span class="hljs-number">4px <span class="hljs-function">rgba(<span class="hljs-number">10,<span class="hljs-number">10,<span class="hljs-number">0,.<span class="hljs-number">5);
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">4px <span class="hljs-hexcolor">#ff0030, <span class="hljs-number">2px <span class="hljs-number">1px <span class="hljs-number">6px <span class="hljs-number">4px <span class="hljs-function">rgba(<span class="hljs-number">10,<span class="hljs-number">10,<span class="hljs-number">0,.<span class="hljs-number">5);
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">border-radius:<span class="hljs-value"> <span class="hljs-number">3px;
}
<span class="hljs-rule"><span class="hljs-attribute">p:<span class="hljs-value">before {
    content: <span class="hljs-string">"";
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> -<span class="hljs-number">1;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">bottom:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">left :<span class="hljs-value"><span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">right:<span class="hljs-value"> <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">2px dashed <span class="hljs-hexcolor">#fff;
}
<span class="hljs-tag">p <span class="hljs-tag">a <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#fff;
    <span class="hljs-rule"><span class="hljs-attribute">text-decoration:<span class="hljs-value">none;
}
<span class="hljs-tag">p <span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">hover, p a:focus, p a:active {
    text-decoration:underline;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

30、CSS3 斑马线

<code class="css"><span class="hljs-tag">tbody <span class="hljs-rule"><span class="hljs-attribute">tr:<span class="hljs-value"><span class="hljs-function">nth-child(odd) {
    background-color: <span class="hljs-hexcolor">#ccc;
}</span></span></span></span></span></span></code>

31、有趣的&

<code class="css"><span class="hljs-class">.amp <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Baskerville, <span class="hljs-string">'Goudy Old Style', Palatino, <span class="hljs-string">'Book Antiqua', serif;
    <span class="hljs-rule"><span class="hljs-attribute">font-style:<span class="hljs-value"> italic;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> normal;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></code>

32、大字段落

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">p:<span class="hljs-value">first-letter{
    display: block;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">5px <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">5px;
    <span class="hljs-rule"><span class="hljs-attribute">float:<span class="hljs-value"> left;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#ff3366;
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">5.4em;
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> Georgia, Times New Roman, serif;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

33、内部CSS3 盒阴影

<code class="css"><span class="hljs-id">#mydiv <span class="hljs-rules">{ 
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> inset <span class="hljs-number">2px <span class="hljs-number">0 <span class="hljs-number">4px <span class="hljs-hexcolor">#000;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> inset <span class="hljs-number">2px <span class="hljs-number">0 <span class="hljs-number">4px <span class="hljs-hexcolor">#000;
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> inset <span class="hljs-number">2px <span class="hljs-number">0 <span class="hljs-number">4px <span class="hljs-hexcolor">#000;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

34、外部CSS3 盒阴影

<code class="css"><span class="hljs-id">#mydiv <span class="hljs-rules">{ 
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">2px <span class="hljs-number">2px -<span class="hljs-number">2px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.52);
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">2px <span class="hljs-number">2px -<span class="hljs-number">2px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.52);
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">2px <span class="hljs-number">2px -<span class="hljs-number">2px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.52);
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

35、三角形列表项目符号

<code class="css"><span class="hljs-tag">ul <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0.75em <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">1em;
    <span class="hljs-rule"><span class="hljs-attribute">list-style:<span class="hljs-value"> none;
}
<span class="hljs-rule"><span class="hljs-attribute">li:<span class="hljs-value">before { 
    content: <span class="hljs-string">"";
    <span class="hljs-rule"><span class="hljs-attribute">border-color:<span class="hljs-value"> transparent <span class="hljs-hexcolor">#111;
    <span class="hljs-rule"><span class="hljs-attribute">border-style:<span class="hljs-value"> solid;
    <span class="hljs-rule"><span class="hljs-attribute">border-width:<span class="hljs-value"> <span class="hljs-number">0.35em <span class="hljs-number">0 <span class="hljs-number">0.35em <span class="hljs-number">0.45em;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> -<span class="hljs-number">1em;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">0.9em;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

36、固定宽度的居中布局

<code class="css"><span class="hljs-id">#page-wrap <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">800px;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0 auto;
}</span></span></span></span></span></span></span></span></span></span></code>

37、CSS3 列文本

<code class="css"><span class="hljs-id">#columns-3 <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">text-align:<span class="hljs-value"> justify;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-column-count:<span class="hljs-value"> <span class="hljs-number">3;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-column-gap:<span class="hljs-value"> <span class="hljs-number">12px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-column-rule:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-hexcolor">#c4c8cc;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-column-count:<span class="hljs-value"> <span class="hljs-number">3;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-column-gap:<span class="hljs-value"> <span class="hljs-number">12px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-column-rule:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-hexcolor">#c4c8cc;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

38、CSS固定页脚

<code class="css"><span class="hljs-id">#footer <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> fixed;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">0px;
    <span class="hljs-rule"><span class="hljs-attribute">bottom:<span class="hljs-value"> <span class="hljs-number">0px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">30px;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">100%;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#444;
}
<span class="hljs-comment">/* IE 6 */
* <span class="hljs-tag">html <span class="hljs-id">#footer <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-function">expression((<span class="hljs-number">0<span class="hljs-function">-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+<span class="hljs-string">'px');
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

39、IE6的PNG透明修复

<code class="css"><span class="hljs-class">.bg <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"><span class="hljs-number">200px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"><span class="hljs-number">100px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(/folder/yourimage.png) no-repeat;
    <span class="hljs-rule"><span class="hljs-attribute">_background:<span class="hljs-value">none;
    <span class="hljs-rule"><span class="hljs-attribute">_filter:<span class="hljs-value">progid:DXImageTransform.Microsoft.<span class="hljs-function">AlphaImageLoader(src=<span class="hljs-string">'/folder/yourimage.png',sizingMethod=<span class="hljs-string">'crop');
}
<span class="hljs-comment">/* 1px gif method */
<span class="hljs-tag">img, <span class="hljs-class">.png <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">behavior:<span class="hljs-value"> <span class="hljs-function">expression((this.runtimeStyle.behavior=<span class="hljs-string">"none")&&(this.pngSet?this.pngSet=true:(this.nodeName == <span class="hljs-string">"IMG" && this.src.<span class="hljs-function">toLowerCase().<span class="hljs-function">indexOf(<span class="hljs-string">'.png')>-<span class="hljs-number">1?(this.runtimeStyle.backgroundImage = <span class="hljs-string">"none",
       this.runtimeStyle.filter = <span class="hljs-string">"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + <span class="hljs-string">"', sizingMethod='image')",
       this.src = <span class="hljs-string">"images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.<span class="hljs-function">toString().<span class="hljs-function">replace(<span class="hljs-string">'url("',<span class="hljs-string">'').<span class="hljs-function">replace(<span class="hljs-string">'")',<span class="hljs-string">''),
       this.runtimeStyle.filter = <span class="hljs-string">"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + <span class="hljs-string">"', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = <span class="hljs-string">"none")),this.pngSet=true));
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

40、跨浏览器设置最小高度

<code class="css"><span class="hljs-id">#container <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">min-height:<span class="hljs-value"> <span class="hljs-number">550px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> auto <span class="hljs-important">!important;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">550px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

41、CSS3 鲜艳的输入

<code class="css"><span class="hljs-tag">input<span class="hljs-attr_selector">[type=text], <span class="hljs-tag">textarea <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-transition:<span class="hljs-value"> all <span class="hljs-number">0.30s ease-in-out;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-transition:<span class="hljs-value"> all <span class="hljs-number">0.30s ease-in-out;
    <span class="hljs-rule"><span class="hljs-attribute">-ms-transition:<span class="hljs-value"> all <span class="hljs-number">0.30s ease-in-out;
    <span class="hljs-rule"><span class="hljs-attribute">-o-transition:<span class="hljs-value"> all <span class="hljs-number">0.30s ease-in-out;
    <span class="hljs-rule"><span class="hljs-attribute">outline:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">3px <span class="hljs-number">0px <span class="hljs-number">3px <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">5px <span class="hljs-number">1px <span class="hljs-number">3px <span class="hljs-number">0px;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-hexcolor">#ddd;
}
<span class="hljs-tag">input<span class="hljs-attr_selector">[type=text]<span class="hljs-pseudo">:focus, <span class="hljs-rule"><span class="hljs-attribute">textarea:<span class="hljs-value">focus {
    box-shadow: <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">5px <span class="hljs-function">rgba(<span class="hljs-number">81, <span class="hljs-number">203, <span class="hljs-number">238, <span class="hljs-number">1);
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">3px <span class="hljs-number">0px <span class="hljs-number">3px <span class="hljs-number">3px;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">5px <span class="hljs-number">1px <span class="hljs-number">3px <span class="hljs-number">0px;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-function">rgba(<span class="hljs-number">81, <span class="hljs-number">203, <span class="hljs-number">238, <span class="hljs-number">1);
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

42、基于文件类型的链接样式

<code class="css"><span class="hljs-comment">/* external links */
<span class="hljs-tag">a<span class="hljs-attr_selector">[href^="http://"] <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">13px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">'external.gif') no-repeat center right;
}
<span class="hljs-comment">/* emails */
<span class="hljs-tag">a<span class="hljs-attr_selector">[href^="mailto:"] <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">'email.png') no-repeat center right;
}
<span class="hljs-comment">/* pdfs */
<span class="hljs-tag">a<span class="hljs-attr_selector">[href$=".pdf"] <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">18px;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">'acrobat.png') no-repeat center right;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

43、强制换行

<code class="css"><span class="hljs-tag">pre <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> pre-wrap;       <span class="hljs-comment">/* css-3 */
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> -moz-pre-wrap;  <span class="hljs-comment">/* Mozilla, since 1999 */
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> -pre-wrap;      <span class="hljs-comment">/* Opera 4-6 */
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> -o-pre-wrap;    <span class="hljs-comment">/* Opera 7 */
    <span class="hljs-rule"><span class="hljs-attribute">word-wrap:<span class="hljs-value"> break-word;       <span class="hljs-comment">/* Internet Explorer 5.5+ */
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

44、在可点击的项目上强制手型

<code class="css"><span class="hljs-tag">a<span class="hljs-attr_selector">[href], <span class="hljs-tag">input<span class="hljs-attr_selector">[type='submit'], <span class="hljs-tag">input<span class="hljs-attr_selector">[type='image'], <span class="hljs-tag">label<span class="hljs-attr_selector">[for], <span class="hljs-tag">select, <span class="hljs-tag">button, <span class="hljs-class">.pointer <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">cursor:<span class="hljs-value"> pointer;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

45、网页顶部盒阴影

<code class="css"><span class="hljs-rule"><span class="hljs-attribute">body:<span class="hljs-value">before {
    content: <span class="hljs-string">"";
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> fixed;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> -<span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">100%;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">10px <span class="hljs-function">rgba(<span class="hljs-number">0,<span class="hljs-number">0,<span class="hljs-number">0,.<span class="hljs-number">8);
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">10px <span class="hljs-function">rgba(<span class="hljs-number">0,<span class="hljs-number">0,<span class="hljs-number">0,.<span class="hljs-number">8);
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">10px <span class="hljs-function">rgba(<span class="hljs-number">0,<span class="hljs-number">0,<span class="hljs-number">0,.<span class="hljs-number">8);
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> <span class="hljs-number">100;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

46、CSS3对话气泡

<code class="css"><span class="hljs-class">.chat-bubble <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> <span class="hljs-hexcolor">#ededed;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">2px solid <span class="hljs-hexcolor">#666;
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">35px;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.3em;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">10px auto;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">text-align:<span class="hljs-value"> center;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">300px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">5px <span class="hljs-hexcolor">#888;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">5px <span class="hljs-hexcolor">#888;
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> <span class="hljs-string">'Bangers', arial, serif; 
}
<span class="hljs-class">.chat-bubble-arrow-border <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">border-color:<span class="hljs-value"> <span class="hljs-hexcolor">#666 transparent transparent transparent;
    <span class="hljs-rule"><span class="hljs-attribute">border-style:<span class="hljs-value"> solid;
    <span class="hljs-rule"><span class="hljs-attribute">border-width:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">bottom:<span class="hljs-value"> -<span class="hljs-number">42px;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">30px;
}
<span class="hljs-class">.chat-bubble-arrow <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">border-color:<span class="hljs-value"> <span class="hljs-hexcolor">#ededed transparent transparent transparent;
    <span class="hljs-rule"><span class="hljs-attribute">border-style:<span class="hljs-value"> solid;
    <span class="hljs-rule"><span class="hljs-attribute">border-width:<span class="hljs-value"> <span class="hljs-number">20px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">bottom:<span class="hljs-value"> -<span class="hljs-number">39px;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">30px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

47、H1-H5默认样式

<code class="css"><span class="hljs-tag">h1,<span class="hljs-tag">h2,<span class="hljs-tag">h3,<span class="hljs-tag">h4,<span class="hljs-tag">h5<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#005a9c;
}
<span class="hljs-tag">h1<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">2.6em;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">2.45em;
}
<span class="hljs-tag">h2<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">2.1em;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.9em;
}
<span class="hljs-tag">h3<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">1.8em;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.65em;
}
<span class="hljs-tag">h4<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">1.65em;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.4em;
}
<span class="hljs-tag">h5<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">1.4em;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.25em;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

48、纯CSS背景噪音

<code class="css"><span class="hljs-tag">body <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> <span class="hljs-hexcolor">#0094d0;
}</span></span></span></span></span></span></span></span></span></span></code>

49、持久的列表排序

<code class="css"><span class="hljs-tag">ol<span class="hljs-class">.chapters <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">list-style:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">margin-left:<span class="hljs-value"> <span class="hljs-number">0;
}
<span class="hljs-tag">ol<span class="hljs-class">.chapters > <span class="hljs-rule"><span class="hljs-attribute">li:<span class="hljs-value">before {
    content: <span class="hljs-function">counter(chapter) <span class="hljs-string">". ";
    <span class="hljs-rule"><span class="hljs-attribute">counter-increment:<span class="hljs-value"> chapter;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> bold;
    <span class="hljs-rule"><span class="hljs-attribute">float:<span class="hljs-value"> left;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">40px;
}
<span class="hljs-tag">ol<span class="hljs-class">.chapters <span class="hljs-tag">li <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">clear:<span class="hljs-value"> left;
}
<span class="hljs-tag">ol<span class="hljs-class">.start <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">counter-reset:<span class="hljs-value"> chapter;
}
<span class="hljs-tag">ol<span class="hljs-class">.continue <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">counter-reset:<span class="hljs-value"> chapter <span class="hljs-number">11;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

50、CSS悬浮提示文本

<code class="css"><span class="hljs-tag">a <span class="hljs-rules">{ 
    <span class="hljs-rule"><span class="hljs-attribute">border-bottom:<span class="hljs-value"><span class="hljs-number">1px solid <span class="hljs-hexcolor">#bbb;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"><span class="hljs-hexcolor">#666;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value">inline-block;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value">relative;
    <span class="hljs-rule"><span class="hljs-attribute">text-decoration:<span class="hljs-value">none;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">hover,
a:focus {
    color:<span class="hljs-hexcolor">#36c;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">active {
    top:<span class="hljs-number">1px; 
}
<span class="hljs-comment">/* Tooltip styling */
<span class="hljs-tag">a<span class="hljs-attr_selector">[data-tooltip]<span class="hljs-pseudo">:after <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">border-top:<span class="hljs-value"> <span class="hljs-number">8px solid <span class="hljs-hexcolor">#222;
    <span class="hljs-rule"><span class="hljs-attribute">border-top:<span class="hljs-value"> <span class="hljs-number">8px solid <span class="hljs-function">hsla(<span class="hljs-number">0,<span class="hljs-number">0%,<span class="hljs-number">0%,.<span class="hljs-number">85);
    <span class="hljs-rule"><span class="hljs-attribute">border-left:<span class="hljs-value"> <span class="hljs-number">8px solid transparent;
    <span class="hljs-rule"><span class="hljs-attribute">border-right:<span class="hljs-value"> <span class="hljs-number">8px solid transparent;
    <span class="hljs-rule"><span class="hljs-attribute">content:<span class="hljs-value"> <span class="hljs-string">"";
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">25%;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
}
<span class="hljs-tag">a<span class="hljs-attr_selector">[data-tooltip]<span class="hljs-pseudo">:before <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#222;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">hsla(<span class="hljs-number">0,<span class="hljs-number">0%,<span class="hljs-number">0%,.<span class="hljs-number">85);
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#f6f6f6;
    <span class="hljs-rule"><span class="hljs-attribute">content:<span class="hljs-value"> <span class="hljs-function">attr(data-tooltip);
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value"> sans-serif;
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"> <span class="hljs-number">14px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">32px;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">32px;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">15px;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">text-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">1px <span class="hljs-function">hsla(<span class="hljs-number">0,<span class="hljs-number">0%,<span class="hljs-number">0%,<span class="hljs-number">1);
    <span class="hljs-rule"><span class="hljs-attribute">white-space:<span class="hljs-value"> nowrap;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius:<span class="hljs-value"> <span class="hljs-number">5px;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius:<span class="hljs-value"> <span class="hljs-number">5px;
    <span class="hljs-rule"><span class="hljs-attribute">-o-border-radius:<span class="hljs-value"> <span class="hljs-number">5px;
    <span class="hljs-rule"><span class="hljs-attribute">border-radius:<span class="hljs-value"> <span class="hljs-number">5px;
}
<span class="hljs-tag">a<span class="hljs-attr_selector">[data-tooltip]<span class="hljs-pseudo">:hover<span class="hljs-pseudo">:after <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> -<span class="hljs-number">9px;
}
<span class="hljs-tag">a<span class="hljs-attr_selector">[data-tooltip]<span class="hljs-pseudo">:hover<span class="hljs-pseudo">:before <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> -<span class="hljs-number">41px;
}
<span class="hljs-tag">a<span class="hljs-attr_selector">[data-tooltip]<span class="hljs-pseudo">:active<span class="hljs-pseudo">:after <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> -<span class="hljs-number">10px;
}
<span class="hljs-tag">a<span class="hljs-attr_selector">[data-tooltip]<span class="hljs-pseudo">:active<span class="hljs-pseudo">:before <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> -<span class="hljs-number">42px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

51、深灰色的圆形按钮

<code class="css"><span class="hljs-class">.graybtn <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value">inset <span class="hljs-number">0px <span class="hljs-number">1px <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-hexcolor">#ffffff;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value">inset <span class="hljs-number">0px <span class="hljs-number">1px <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-hexcolor">#ffffff;
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value">inset <span class="hljs-number">0px <span class="hljs-number">1px <span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-hexcolor">#ffffff;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"><span class="hljs-function">-webkit-gradient( linear, left top, left bottom, <span class="hljs-function">color-stop(<span class="hljs-number">0.05, <span class="hljs-hexcolor">#ffffff), <span class="hljs-function">color-stop(<span class="hljs-number">1, <span class="hljs-hexcolor">#d1d1d1) );
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"><span class="hljs-function">-moz-linear-gradient( center top, <span class="hljs-hexcolor">#ffffff <span class="hljs-number">5%, <span class="hljs-hexcolor">#d1d1d1 <span class="hljs-number">100% );
    <span class="hljs-rule"><span class="hljs-attribute">filter:<span class="hljs-value">progid:DXImageTransform.Microsoft.<span class="hljs-function">gradient(startColorstr=<span class="hljs-string">'#ffffff', endColorstr=<span class="hljs-string">'#d1d1d1');
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"><span class="hljs-hexcolor">#ffffff;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius:<span class="hljs-value"><span class="hljs-number">6px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius:<span class="hljs-value"><span class="hljs-number">6px;
    <span class="hljs-rule"><span class="hljs-attribute">border-radius:<span class="hljs-value"><span class="hljs-number">6px;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"><span class="hljs-number">1px solid <span class="hljs-hexcolor">#dcdcdc;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value">inline-block;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"><span class="hljs-hexcolor">#777777;
    <span class="hljs-rule"><span class="hljs-attribute">font-family:<span class="hljs-value">arial;
    <span class="hljs-rule"><span class="hljs-attribute">font-size:<span class="hljs-value"><span class="hljs-number">15px;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value">bold;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"><span class="hljs-number">6px <span class="hljs-number">24px;
    <span class="hljs-rule"><span class="hljs-attribute">text-decoration:<span class="hljs-value">none;
    <span class="hljs-rule"><span class="hljs-attribute">text-shadow:<span class="hljs-value"><span class="hljs-number">1px <span class="hljs-number">1px <span class="hljs-number">0px <span class="hljs-hexcolor">#ffffff;
}
<span class="hljs-rule"><span class="hljs-attribute">.graybtn:<span class="hljs-value">hover {
    background:<span class="hljs-function">-webkit-gradient( linear, left top, left bottom, <span class="hljs-function">color-stop(<span class="hljs-number">0.05, <span class="hljs-hexcolor">#d1d1d1), <span class="hljs-function">color-stop(<span class="hljs-number">1, <span class="hljs-hexcolor">#ffffff) );
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"><span class="hljs-function">-moz-linear-gradient( center top, <span class="hljs-hexcolor">#d1d1d1 <span class="hljs-number">5%, <span class="hljs-hexcolor">#ffffff <span class="hljs-number">100% );
    <span class="hljs-rule"><span class="hljs-attribute">filter:<span class="hljs-value">progid:DXImageTransform.Microsoft.<span class="hljs-function">gradient(startColorstr=<span class="hljs-string">'#d1d1d1', endColorstr=<span class="hljs-string">'#ffffff');
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"><span class="hljs-hexcolor">#d1d1d1;
}
<span class="hljs-rule"><span class="hljs-attribute">.graybtn:<span class="hljs-value">active {
    position:relative;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"><span class="hljs-number">1px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

52、在可打印的网页中显示URLs

<code class="css"><span class="hljs-at_rule">@<span class="hljs-keyword">media print   {  
  <span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">after {  
    content: <span class="hljs-string">" [" <span class="hljs-function">attr(href) <span class="hljs-string">"] ";  
  }  
}</span></span></span></span></span></span></span></span></code>

53、禁用移动Webkit的选择高亮

<code class="css"><span class="hljs-tag">body <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-touch-callout:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-user-select:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">-khtml-user-select:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-user-select:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">-ms-user-select:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">user-select:<span class="hljs-value"> none;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

54、CSS3 圆点图案

<code class="css"><span class="hljs-tag">body <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">radial-gradient(circle, white <span class="hljs-number">10%, transparent <span class="hljs-number">10%),
    <span class="hljs-function">radial-gradient(circle, white <span class="hljs-number">10%, black <span class="hljs-number">10%) <span class="hljs-number">50px <span class="hljs-number">50px;
    <span class="hljs-rule"><span class="hljs-attribute">background-size:<span class="hljs-value"> <span class="hljs-number">100px <span class="hljs-number">100px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

55、CSS3 方格图案

<code class="css"><span class="hljs-tag">body <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> white;
    <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">linear-gradient(<span class="hljs-number">45deg, black <span class="hljs-number">25%, transparent <span class="hljs-number">25%, transparent <span class="hljs-number">75%, black <span class="hljs-number">75%, black), 
    <span class="hljs-function">linear-gradient(<span class="hljs-number">45deg, black <span class="hljs-number">25%, transparent <span class="hljs-number">25%, transparent <span class="hljs-number">75%, black <span class="hljs-number">75%, black);
    <span class="hljs-rule"><span class="hljs-attribute">background-size:<span class="hljs-value"> <span class="hljs-number">100px <span class="hljs-number">100px;
    <span class="hljs-rule"><span class="hljs-attribute">background-position:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0, <span class="hljs-number">50px <span class="hljs-number">50px;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

56、Github的fork色带

<code class="css"><span class="hljs-class">.ribbon <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> <span class="hljs-hexcolor">#a00;
    <span class="hljs-rule"><span class="hljs-attribute">overflow:<span class="hljs-value"> hidden;
    <span class="hljs-comment">/* top left corner */
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> -<span class="hljs-number">3em;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">2.5em;
    <span class="hljs-comment">/* 45 deg ccw rotation */
    <span class="hljs-rule"><span class="hljs-attribute">-moz-transform:<span class="hljs-value"> <span class="hljs-function">rotate(-<span class="hljs-number">45deg);
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-transform:<span class="hljs-value"> <span class="hljs-function">rotate(-<span class="hljs-number">45deg);
    <span class="hljs-comment">/* shadow */
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">1em <span class="hljs-hexcolor">#888;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">1em <span class="hljs-hexcolor">#888;
}
<span class="hljs-class">.ribbon <span class="hljs-tag">a <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-hexcolor">#faa;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#fff;
    <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block;
    <span class="hljs-rule"><span class="hljs-attribute">font:<span class="hljs-value"> bold <span class="hljs-number">81.25% <span class="hljs-string">'Helvetiva Neue', Helvetica, Arial, sans-serif;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0.05em <span class="hljs-number">0 <span class="hljs-number">0.075em <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">0.5em <span class="hljs-number">3.5em;
    <span class="hljs-rule"><span class="hljs-attribute">text-align:<span class="hljs-value"> center;
    <span class="hljs-rule"><span class="hljs-attribute">text-decoration:<span class="hljs-value"> none;
    <span class="hljs-comment">/* shadow */
    <span class="hljs-rule"><span class="hljs-attribute">text-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">0.5em <span class="hljs-hexcolor">#444;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

57、CSS font属性缩写

<code class="css"><span class="hljs-tag">p <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">font:<span class="hljs-value"> italic small-caps bold <span class="hljs-number">1.2em/<span class="hljs-number">1.0em Arial, Tahoma, Helvetica;
}</span></span></span></span></span></span></span></code>

58、论文页面的卷曲效果

<code class="css"><span class="hljs-tag">ul<span class="hljs-class">.box <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> <span class="hljs-number">1; <span class="hljs-comment">/* prevent shadows falling behind containers with backgrounds */
    <span class="hljs-rule"><span class="hljs-attribute">overflow:<span class="hljs-value"> hidden;
    <span class="hljs-rule"><span class="hljs-attribute">list-style:<span class="hljs-value"> none;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">0; 
}
<span class="hljs-tag">ul<span class="hljs-class">.box <span class="hljs-tag">li <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">float:<span class="hljs-value"> left;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">250px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">150px;
    <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-hexcolor">#efefef;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">30px <span class="hljs-number">30px <span class="hljs-number">0;
    <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-hexcolor">#fff;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">4px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.27), <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">40px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.06) inset;
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">4px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.27), <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">40px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.06) inset; 
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">4px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.27), <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">40px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.06) inset; 
}
<span class="hljs-tag">ul<span class="hljs-class">.box <span class="hljs-rule"><span class="hljs-attribute">li:<span class="hljs-value">before,
ul.box li:after {
    content: <span class="hljs-string">'';
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> -<span class="hljs-number">1;
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">bottom:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">70%;
    <span class="hljs-rule"><span class="hljs-attribute">max-width:<span class="hljs-value"> <span class="hljs-number">300px; <span class="hljs-comment">/* avoid rotation causing ugly appearance at large container widths */
    <span class="hljs-rule"><span class="hljs-attribute">max-height:<span class="hljs-value"> <span class="hljs-number">100px;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">55%;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">8px <span class="hljs-number">16px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.3);
    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">8px <span class="hljs-number">16px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.3);
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">8px <span class="hljs-number">16px <span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.3);
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-transform:<span class="hljs-value"> <span class="hljs-function">skew(-<span class="hljs-number">15deg) <span class="hljs-function">rotate(-<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">-moz-transform:<span class="hljs-value"> <span class="hljs-function">skew(-<span class="hljs-number">15deg) <span class="hljs-function">rotate(-<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">-ms-transform:<span class="hljs-value"> <span class="hljs-function">skew(-<span class="hljs-number">15deg) <span class="hljs-function">rotate(-<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">-o-transform:<span class="hljs-value"> <span class="hljs-function">skew(-<span class="hljs-number">15deg) <span class="hljs-function">rotate(-<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">transform:<span class="hljs-value"> <span class="hljs-function">skew(-<span class="hljs-number">15deg) <span class="hljs-function">rotate(-<span class="hljs-number">6deg); 
}
<span class="hljs-tag">ul<span class="hljs-class">.box <span class="hljs-rule"><span class="hljs-attribute">li:<span class="hljs-value">after {
    left: auto;
    <span class="hljs-rule"><span class="hljs-attribute">right:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-transform:<span class="hljs-value"> <span class="hljs-function">skew(<span class="hljs-number">15deg) <span class="hljs-function">rotate(<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">-moz-transform:<span class="hljs-value"> <span class="hljs-function">skew(<span class="hljs-number">15deg) <span class="hljs-function">rotate(<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">-ms-transform:<span class="hljs-value"> <span class="hljs-function">skew(<span class="hljs-number">15deg) <span class="hljs-function">rotate(<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">-o-transform:<span class="hljs-value"> <span class="hljs-function">skew(<span class="hljs-number">15deg) <span class="hljs-function">rotate(<span class="hljs-number">6deg);
    <span class="hljs-rule"><span class="hljs-attribute">transform:<span class="hljs-value"> <span class="hljs-function">skew(<span class="hljs-number">15deg) <span class="hljs-function">rotate(<span class="hljs-number">6deg); 
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

59、鲜艳的锚链接

<code class="css"><span class="hljs-tag">a <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#00e;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">visited {
    color: <span class="hljs-hexcolor">#551a8b;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">hover {
    color: <span class="hljs-hexcolor">#06e;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">focus {
    outline: thin dotted;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">hover, a:active {
    outline: <span class="hljs-number">0;
}
<span class="hljs-tag">a, <span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">visited, a:active {
    text-decoration: none;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#fff;
    <span class="hljs-rule"><span class="hljs-attribute">-webkit-transition:<span class="hljs-value"> all .<span class="hljs-number">3s ease-in-out;
}
<span class="hljs-rule"><span class="hljs-attribute">a:<span class="hljs-value">hover, .glow {
    color: <span class="hljs-hexcolor">#ff0;
    <span class="hljs-rule"><span class="hljs-attribute">text-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">10px <span class="hljs-hexcolor">#ff0;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

60、带CSS3特色的横幅显示

<code class="css"><span class="hljs-class">.featureBanner <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> relative;
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">20px
}
.featureBanner:before {
    content: <span class="hljs-string">"Featured";
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">5px;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> -<span class="hljs-number">8px;
    <span class="hljs-rule"><span class="hljs-attribute">padding-right:<span class="hljs-value"> <span class="hljs-number">10px;
    <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#232323;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight:<span class="hljs-value"> bold;
    <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">0px;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">15px solid <span class="hljs-hexcolor">#ffa200;
    <span class="hljs-rule"><span class="hljs-attribute">border-right-color:<span class="hljs-value"> transparent;
    <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">0px;
    <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> -<span class="hljs-number">0px <span class="hljs-number">5px <span class="hljs-number">5px -<span class="hljs-number">5px <span class="hljs-hexcolor">#000;
    <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> <span class="hljs-number">1;
}
<span class="hljs-rule"><span class="hljs-attribute">.featureBanner:<span class="hljs-value">after {
    content: <span class="hljs-string">"";
    <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
    <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">35px;
    <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> -<span class="hljs-number">8px;
    <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">4px solid <span class="hljs-hexcolor">#89540c;
    <span class="hljs-rule"><span class="hljs-attribute">border-left-color:<span class="hljs-value"> transparent;
    <span class="hljs-rule"><span class="hljs-attribute">border-bottom-color:<span class="hljs-value"> transparent;
}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

文／poetries（简书作者）
原文链接：http://www.jianshu.com/p/e878122a92a3
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verstehen Sie die Semantik der HTML-Struktur?Nächster Artikel：Wie verstehen Sie die Semantik der HTML-Struktur?

In Verbindung stehende Artikel

Mehr sehen