Shulou(Shulou.com)06/01 Report--

Editor to share with you what the common skills of css are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Triangle list bullets

Ul {margin: 0.75em 0; padding: 01em; list-style: none;} li:before {content: "; border-color: transparent # 111; border-style: solid; border-width: 0.35em 0 0.35em 0.45mm; display: block; height: 0; width: 0; left:-1em; top: 0.9em; position: relative;}

2. Shadow of external CSS3 box

# mydiv {- webkit-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52);-moz-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52); box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52);}

3. Shadow of internal CSS3 box

# mydiv {- moz-box-shadow: inset 2px 0 4px # 000;-webkit-box-shadow: inset 2px 0 4px # 000; box-shadow: inset 2px 0 4px # 000;}

4. CSS3 zebra crossing

Tbody tr:nth-child (odd) {background-color: # ccc;}

5. Force the vertical scroll bar to appear

Html {height: 101%}

6. The content is vertically centered

.container {min-height: 6.5em; display: table-cell; vertical-align: middle;}

7. CSS3: full screen background

Html {background: url ('images/bg.jpg') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover;}

8. Anchor link pseudo-class

A:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: yellow;}

9. Hide H1 for logo

H2 {text-indent:-9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url ("images/logo.png") no-repeat scroll;}

10. Custom text selection

:: selection {background: # e2eae2;}::-moz-selection {background: # e2eae2;}::-webkit-selection {background: # e2eae2;}

11. Transparency across browsers

Filter: alpha (opacity=50); / * internet explorer * /-khtml-opacity: 0.5; / * khtml, old safari * /-moz-opacity: 0.5; / * mozilla, netscape * / opacity: 0.5; / * fx, safari, opera * /}

12. New version clear float (2011)

.clearfix: before, .container: after {content: "; display: table;}. Clearfix:after {clear: both;} / * IE 6 clearfix 7 * / .clearfix {zoom: 1;}

13. Typical CSS cleanup float

.clearfix: after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix {display: inline-block;} html [xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;}

14. Create fuzzy text

Want to blur the text? Can be implemented using color transparency and text-shadow

.blurry-text {color: transparent; text-shadow: 0 5px rgba;}

15. CSS: table column width is self-applicable

For tables, it is more painful when it comes to adjusting column widths. Then, here is a technique that can be used: adding white-space: nowrap; to the td element makes the text wrap correctly

Td {white-space: nowrap;} these are all the contents of this article entitled "what are the Common skills of css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.