简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  实用的60个CSS代码片段

实用的60个CSS代码片段

WBOY
WBOYOriginal
2016-10-22 00:00:141777Durchsuche

1、垂直对齐

如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：

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

使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，
Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性

2、伸展一个元素到窗口高度

在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，
我们需要伸展顶层元素：html和body:

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

然后将100%应用到任何元素的高

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

3、基于文件格式使用不同的样式

为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：

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

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

效果演示

4、创建跨浏览器的图像灰度

灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：

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

为了跨浏览器，会用到filter属性：

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

5、背景渐变动画

CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。

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

效果演示：

6、CSS：表格列宽自适用

对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加white-space: nowrap;能让文本正确的换行

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

演示

7、只在一边或两边显示盒子阴影

如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下

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

演示

8、包裹长文本

如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。


 

简单的CSS代码就能在容器中调整文本：

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

效果看起来如下：


 

9、制造模糊文本

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

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

演示

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

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

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

演示

11、样式重置

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

12、典型的CSS清除浮动

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

13、新版清除浮动（2011）

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

14、跨浏览器的透明

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

15、CSS引用模板

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

16、个性圆角

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

17、通用媒体查询

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

18、现代字体栈

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

19、自定义文本选择

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

20、为logo隐藏H1

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

21、图片边框偏光

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

22、锚链接伪类

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

23、奇特的CSS引用

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

24、CSS3：全屏背景

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

25、内容垂直居中

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

26、强制出现垂直滚动条

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

27、CSS3渐变模板

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

28、@font-face模板

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

29、缝合CSS3元素

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

30、CSS3 斑马线

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

31、有趣的&

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

32、大字段落

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

33、内部CSS3 盒阴影

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

34、外部CSS3 盒阴影

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

35、三角形列表项目符号

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

36、固定宽度的居中布局

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

37、CSS3 列文本

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

38、CSS固定页脚

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

39、IE6的PNG透明修复

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

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

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

41、CSS3 鲜艳的输入

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

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

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

43、强制换行

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

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

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

45、网页顶部盒阴影

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

46、CSS3对话气泡

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

47、H1-H5默认样式

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

48、纯CSS背景噪音

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

49、持久的列表排序

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

50、CSS悬浮提示文本

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

51、深灰色的圆形按钮

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

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

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

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

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

54、CSS3 圆点图案

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

55、CSS3 方格图案

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

56、Github的fork色带

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

57、CSS font属性缩写

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

58、论文页面的卷曲效果

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

59、鲜艳的锚链接

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

60、带CSS3特色的横幅显示

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



文／poetries（简书作者）
原文链接：http://www.jianshu.com/p/e878122a92a3
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：你如何理解HTML结构的语义化？Nächster Artikel：标签

In Verbindung stehende Artikel

Mehr sehen