Home > Article > Web Front-end > 60 useful CSS code snippets
60 useful CSS code snippets
- WBOYOriginal
- 2016-10-22 00:00:141811browse
1. Vertical alignment
If you use CSS, you will be confused: how do I vertically align the elements in the container? Now, using Transform of CSS3, this confusion can be solved elegantly:
<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>
Use this technique to vertically align everything from single lines of text to paragraphs to boxes. At present, browser support for Transform requires attention. Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9 all support this attribute
2. Stretch an element to the window height
In specific scenarios, you may want to stretch an element to the window height. Adjustment of basic elements can only adjust the size of the container. Therefore, to make an element stretch to the window height,
we need to stretch the top-level element: html and 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>
Then apply 100% to any element’s height
<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. Use different styles based on file format
To make it easier to know where a link is going, sometimes you want some links to look different than others. The snippet below adds an icon before a text link, using different icons or images for different resources:
<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>
Effect demonstration
4. Create cross-browser image grayscale
Grayscale sometimes looks simple and elegant, giving a website a deeper tone. In the example we will add grayscale filtering to an SVG image:
<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>
In order to be cross-browser, the filter attribute will be used:
<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. Background gradient animation
One of the most tempting features of
CSS is the ability to add animation effects. In addition to gradients, you can add animations to background color, transparency, and element size. Currently, you cannot animate gradients, but the code below may help. It changes the position of the background to make it look animated.
<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>
Effect demonstration:
6. CSS: Table column width is self-adaptive
For tables, when it comes to adjusting column widths, it is more painful. Then, here’s a trick you can use: add white-space: nowrap; to the td element to make the text wrap correctly
<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>
Demo
7. Display box shadow only on one or both sides
If you want a box shadow, try this trick to add shadow to either side. To achieve this, first define a box with a specific width and height, and then position the :after pseudo-class correctly. The code to implement bottom shadow is as follows
<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>
Demo
8. Wrap long text
If you encounter a text that is longer than its own container, this trick will be useful for you. In this example, by default, the text will fill horizontally regardless of the width of the container.
Simple CSScode to adjust the text in the container:
<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>
The effect looks like this:
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
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
原文链接：http://www.jianshu.com/p/e878122a92a3
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How do you understand the semantics of HTML structure?Next article：How do you understand the semantics of HTML structure?