집 >웹 프론트엔드 >HTML 튜토리얼 >60가지 유용한 CSS 코드 조각

60가지 유용한 CSS 코드 조각

WBOY원래의: 2016-10-22 00:00:141836검색

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>

이 기술을 사용하면 텍스트 한 줄부터 단락, 상자까지 모든 항목을 세로로 정렬할 수 있습니다. 현재 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
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

성명：

이전 기사：HTML 구조의 의미를 어떻게 이해합니까?다음 기사：HTML 구조의 의미를 어떻게 이해합니까?