60 の便利な CSS コード スニペット

1. 垂直方向の配置

---

を使用すると、この混乱を非常にエレガントに解決できます: CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform リーリー

このテクニックを使用して、単一行のテキストから段落、ボックスに至るまで、あらゆるものを垂直方向に配置します。現在、すべてのブラウザがこの属性をサポートしています

Transform的支持是需要关注的，
Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 92. 要素をウィンドウの高さに合わせて伸縮します

特定のシナリオでは、要素をウィンドウの高さに合わせて拡張する必要がある場合があります。基本要素の調整では、コンテナのサイズのみを調整できます。したがって、要素をウィンドウの高さに合わせて拡張するには、

---

次の操作を行う必要があります。最上位要素をストレッチします:

:
リーリー html和body次に、

を任意の要素の高さに適用します

リーリー 100%3. ファイル形式に基づいて異なるスタイルを使用する

リンクの行き先をわかりやすくするために、一部のリンクを他のリンクとは異なって見せたい場合があります。以下のスニペットは、リソースごとに異なるアイコンまたは画像を使用して、テキスト リンクの前にアイコンを追加します。

---

リーリー

効果デモンストレーション

4. クロスブラウザー画像のグレースケールを作成する

グレースケールはミニマリストでエレガントに見える場合があり、ウェブサイトに深みのあるトーンを与えます。この例では、SVG 画像にグレースケール フィルタリングを追加します。

---

リーリー

クロスブラウザで使用する場合、

属性が使用されます:

リーリー filter5. 背景のグラデーションアニメーション

---

の最も魅力的な機能の 1 つは、グラデーションに加えて、背景色、透明度、要素のサイズにアニメーションを追加できることです。現在、グラデーションをアニメーション化することはできませんが、以下のコードが役に立つかもしれません。背景の位置を変更してアニメーションのように見せます。

リーリー CSS効果デモンストレーション:

6. CSS: テーブルの列幅は自動適応します

表の場合、列幅を調整するのはさらに面倒です。次に、使用できるトリックを次に示します。

---

を指定すると、テキストが正しく折り返されます

リーリー td元素添加white-space: nowrap;デモ

7. ボックスの影を片面または両面にのみ表示します

ボックスの影が必要な場合は、どちらかの側に影を追加するこのトリックを試してください。これを実現するには、まず特定の幅と高さのボックスを定義し、次に

---

疑似クラスを正しく配置します。ボトムシャドウを実装するコードは以下の通りです

リーリー :afterデモ

8. 長いテキストを折り返す

このトリックは、独自のコンテナーよりも長いテキストに遭遇した場合に役立ちます。この例では、デフォルトで、テキストはコンテナの幅に関係なく水平方向に塗りつぶされます。

---

コンテナ内のテキストを調整するための簡単な

コード:

リーリー CSS効果は次のようになります:

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
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。