2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1、垂直对齐

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

  1. .verticalcenter{

  2. position: relative;

  3. top: 50%;

  4. -webkit-transform: translateY(-50%);

  5. -o-transform: translateY(-50%);

  6. transform: translateY(-50%);

  7. }

复制代码

(ps:【译】如何实现CSS居中？–CSS居中常用方法)
使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.均支持该属性。

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

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

  1. html,

  2. body {

  3. height: 100%;

  4. }

复制代码

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

  1. div {

  2. height: 100%;

  3. }

复制代码

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

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

  1. a[href^="http://"]{

  2. padding-right: 20px;

  3. background: url(external.gif) no-repeat center right;

  4. }

  5. /* emails */

  6. a[href^="mailto:"]{

  7. padding-right: 20px;

  8. background: url(email.png) no-repeat center right;

  9. }

  10. /* pdfs */

  11. a[href$=".pdf"]{

  12. padding-right: 20px;

  13. background: url(pdf.png) no-repeat center right;

  14. }

复制代码

看起来是这样的:http://jsfiddle.net/agusesetiyono/3sL1r0mw/light/

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

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

  1. <svg xmlns="http://www.w3.org/2000/svg">

  2. <filter id="grayscale">

  3. <feColorMatrix type="matrix" values="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"/>

  4. </filter>

  5. </svg>

复制代码

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

  1. img {

  2. filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

  3. filter: gray; /* IE6-9 */

  4. -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

  5. }

复制代码

5、背景渐变动画

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

  1. button {

  2. background-image: linear-gradient(#5187c4, #1c2f45);

  3. background-size: auto 200%;

  4. background-position: 0 100%;

  5. transition: background-position 0.5s;

  6. }

  7. button:hover {

  8. background-position: 0 0;

  9. }

复制代码

效果在这里：http://jsfiddle.net/agusesetiyono/gw46dk27/1/light/

6、CSS：表格列宽自适用

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

  1. td {

  2. white-space: nowrap;

  3. }

复制代码

查看效果：http://jsfiddle.net/agusesetiyono/1uotj8wv/3/light/

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

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

  1. .box-shadow {

  2. background-color: #FF8020;

  3. width: 160px;

  4. height: 90px;

  5. margin-top: -45px;

  6. margin-left: -80px;

  7. position: absolute;

  8. top: 50%;

  9. left: 50%;

  10. }

  11. .box-shadow:after {

  12. content: "";

  13. width: 150px;

  14. height: 1px;

  15. margin-top: 88px;

  16. margin-left: -75px;

  17. display: block;

  18. position: absolute;

  19. left: 50%;

  20. z-index: -1;

  21. -webkit-box-shadow: 0px 0px 8px 2px #000000;

  22. -moz-box-shadow: 0px 0px 8px 2px #000000;

  23. box-shadow: 0px 0px 8px 2px #000000;

  24. }

复制代码

效果：http://jsfiddle.net/agusesetiyono/1kwhsfvo/light/

8、包裹长文本

如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。
11130010_blJS.jpg
简单的css代码就能在容器中调整文本：

  1. pre {

  2. white-space: pre-line;

  3. word-wrap: break-word;

  4. }

复制代码

效果看起来如下：
11130010_cJYo.jpg

9、制造模糊文本

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

  1. .blurry-text {

  2. color: transparent;

  3. text-shadow: 0 0 5px rgba(0,0,0,0.5);

  4. }

复制代码

demo:http://jsfiddle.net/agusesetiyono/n5uh4s0j/light/

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

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

  1. .loading:after {

  2. overflow: hidden;

  3. display: inline-block;

  4. vertical-align: bottom;

  5. animation: ellipsis 2s infinite;

  6. content: "\2026"; /* ascii code for the ellipsis character */

  7. }

  8. @keyframes ellipsis {

  9. from {

  10. width: 2px;

  11. }

  12. to {

  13. width: 15px;

  14. }

  15. }

复制代码

效果：http://jsfiddle.net/agusesetiyono/MDzsR/69/light/

11、样式重置

  1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

  2. margin: 0;

  3. padding: 0;

  4. border: 0;

  5. font-size: 100%;

  6. font: inherit;

  7. vertical-align: baseline;

  8. outline: none;

  9. -webkit-box-sizing: border-box;

  10. -moz-box-sizing: border-box;

  11. box-sizing: border-box;

  12. }

  13. html { height: 101%; }

  14. body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

  15. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

  16. ol, ul { list-style: none; }

  17. blockquote, q { quotes: none; }

  18. blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

  19. strong { font-weight: bold; }

  20. table { border-collapse: collapse; border-spacing: 0; }

  21. img { border: 0; max-width: 100%; }

  22. p { font-size: 1.2em; line-height: 1.0em; color: #333; }

复制代码

12、典型的CSS清除浮动

  1. .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

  2. .clearfix { display: inline-block; }

  3. html[xmlns] .clearfix { display: block; }

  4. * html .clearfix { height: 1%; }

复制代码

13、新版清除浮动（2011）

  1. .clearfix:before, .container:after { content: ""; display: table; }

  2. .clearfix:after { clear: both; }

  3. /* IE 6/7 */

  4. .clearfix { zoom: 1; }

复制代码

14、跨浏览器的透明

  1. .transparent {

  2. filter: alpha(opacity=50); /* internet explorer */

  3. -khtml-opacity: 0.5; /* khtml, old safari */

  4. -moz-opacity: 0.5; /* mozilla, netscape */

  5. opacity: 0.5; /* fx, safari, opera */

  6. }

复制代码

15、CSS引用模板

  1. blockquote {

  2. background: #f9f9f9;

  3. border-left: 10px solid #ccc;

  4. margin: 1.5em 10px;

  5. padding: .5em 10px;

  6. quotes: "\201C""\201D""\2018""\2019";

  7. }

  8. blockquote:before {

  9. color: #ccc;

  10. content: open-quote;

  11. font-size: 4em;

  12. line-height: .1em;

  13. margin-right: .25em;

  14. vertical-align: -.4em;

  15. }

  16. blockquote p {

  17. display: inline;

  18. }

复制代码

16、个性圆角

  1. #container {

  2. -webkit-border-radius: 4px 3px 6px 10px;

  3. -moz-border-radius: 4px 3px 6px 10px;

  4. -o-border-radius: 4px 3px 6px 10px;

  5. border-radius: 4px 3px 6px 10px;

  6. }

  7. /* alternative syntax broken into each line */

  8. #container {

  9. -webkit-border-top-left-radius: 4px;

  10. -webkit-border-top-right-radius: 3px;

  11. -webkit-border-bottom-right-radius: 6px;

  12. -webkit-border-bottom-left-radius: 10px;

  13. -moz-border-radius-topleft: 4px;

  14. -moz-border-radius-topright: 3px;

  15. -moz-border-radius-bottomright: 6px;

  16. -moz-border-radius-bottomleft: 10px;

  17. }

复制代码

17、通用媒体查询

  1. /* Smartphones (portrait and landscape) ----------- */

  2. @media only screen

  3. and (min-device-width : 320px) and (max-device-width : 480px) {

  4. /* Styles */

  5. }

  6. /* Smartphones (landscape) ----------- */

  7. @media only screen and (min-width : 321px) {

  8. /* Styles */

  9. }

  10. /* Smartphones (portrait) ----------- */

  11. @media only screen and (max-width : 320px) {

  12. /* Styles */

  13. }

  14. /* iPads (portrait and landscape) ----------- */

  15. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

  16. /* Styles */

  17. }

  18. /* iPads (landscape) ----------- */

  19. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

  20. /* Styles */

  21. }

  22. /* iPads (portrait) ----------- */

  23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

  24. /* Styles */

  25. }

  26. /* Desktops and laptops ----------- */

  27. @media only screen and (min-width : 1224px) {

  28. /* Styles */

  29. }

  30. /* Large screens ----------- */

  31. @media only screen and (min-width : 1824px) {

  32. /* Styles */

  33. }

  34. /* iPhone 4 ----------- */

  35. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

  36. /* Styles */

  37. }

复制代码

(ps:【译】Responsive Design常用的媒体查询)

18、现代字体栈

  1. /* Times New Roman-based serif */

  2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

  3. /* A modern Georgia-based serif */

  4. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

  5. /*A more traditional Garamond-based serif */

  6. font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

  7. /*The Helvetica/Arial-based sans serif */

  8. font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

  9. /*The Verdana-based sans serif */

  10. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

  11. /*The Trebuchet-based sans serif */

  12. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

  13. /*The heavier "Impact" sans serif */

  14. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

  15. /*The monospace */

  16. font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

复制代码

Code Source

19、自定义文本选择

  1. ::selection { background: #e2eae2; }

  2. ::-moz-selection { background: #e2eae2; }

  3. ::-webkit-selection { background: #e2eae2; }

复制代码

20、为logo隐藏H1

  1. h1 {

  2. text-indent: -9999px;

  3. margin: 0 auto;

  4. width: 320px;

  5. height: 85px;

  6. background: transparent url("images/logo.png") no-repeat scroll;

  7. }

复制代码

21、图片边框偏光

  1. img.polaroid {

  2. background:#000; /*Change this to a background image or remove*/

  3. border:solid #fff;

  4. border-width:6px 6px 20px 6px;

  5. box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */

  6. -webkit-box-shadow:1px 1px 5px #333;

  7. -moz-box-shadow:1px 1px 5px #333;

  8. height:200px; /*Set to height of your image or desired div*/

  9. width:200px; /*Set to width of your image or desired div*/

  10. }

复制代码

Code Source

22、锚链接伪类

  1. a:link { color: blue; }

  2. a:visited { color: purple; }

  3. a:hover { color: red; }

  4. a:active { color: yellow; }

复制代码

Code Source

23、奇特的CSS引用

  1. .has-pullquote:before {

  2. /* Reset metrics. */

  3. padding: 0;

  4. border: none;

  5. /* Content */

  6. content: attr(data-pullquote);

  7. /* Pull out to the right, modular scale based margins. */

  8. float: right;

  9. width: 320px;

  10. margin: 12px -140px 24px 36px;

  11. /* Baseline correction */

  12. position: relative;

  13. top: 5px;

  14. /* Typography (30px line-height equals 25% incremental leading) */

  15. font-size: 23px;

  16. line-height: 30px;

  17. }

  18. .pullquote-adelle:before {

  19. font-family: "adelle-1", "adelle-2";

  20. font-weight: 100;

  21. top: 10px !important;

  22. }

  23. .pullquote-helvetica:before {

  24. font-family: "Helvetica Neue", Arial, sans-serif;

  25. font-weight: bold;

  26. top: 7px !important;

  27. }

  28. .pullquote-facit:before {

  29. font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;

  30. font-weight: bold;

  31. top: 7px !important;

  32. }

复制代码

Code Source

24、CSS3：全屏背景

  1. html {

  2. background: url('images/bg.jpg') no-repeat center center fixed;

  3. -webkit-background-size: cover;

  4. -moz-background-size: cover;

  5. -o-background-size: cover;

  6. background-size: cover;

  7. }

复制代码

Code Source

25、内容垂直居中

  1. .container {

  2. min-height: 6.5em;

  3. display: table-cell;

  4. vertical-align: middle;

  5. }

复制代码

Code Source

26、强制出现垂直滚动条

  1. html { height: 101% }

复制代码

27、CSS3渐变模板

  1. #colorbox {

  2. background: #629721;

  3. background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));

  4. background-image: -webkit-linear-gradient(top, #83b842, #629721);

  5. background-image: -moz-linear-gradient(top, #83b842, #629721);

  6. background-image: -ms-linear-gradient(top, #83b842, #629721);

  7. background-image: -o-linear-gradient(top, #83b842, #629721);

  8. background-image: linear-gradient(top, #83b842, #629721);

  9. }

复制代码

28、@font-face模板

  1. @font-face {

  2. font-family: 'MyWebFont';

  3. src: url('webfont.eot'); /* IE9 Compat Modes */

  4. src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  5. url('webfont.woff') format('woff'), /* Modern Browsers */

  6. url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */

  7. url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

  8. }

  9. body {

  10. font-family: 'MyWebFont', Arial, sans-serif;

  11. }

复制代码

Code Source

29、缝合CSS3元素

  1. p {

  2. position:relative;

  3. z-index:1;

  4. padding: 10px;

  5. margin: 10px;

  6. font-size: 21px;

  7. line-height: 1.3em;

  8. color: #fff;

  9. background: #ff0030;

  10. -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

  11. -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

  12. box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);

  13. -webkit-border-radius: 3px;

  14. -moz-border-radius: 3px;

  15. border-radius: 3px;

  16. }

  17. p:before {

  18. content: "";

  19. position: absolute;

  20. z-index: -1;

  21. top: 3px;

  22. bottom: 3px;

  23. left :3px;

  24. right: 3px;

  25. border: 2px dashed #fff;

  26. }

  27. p a {

  28. color: #fff;

  29. text-decoration:none;

  30. }

  31. p a:hover, p a:focus, p a:active {

  32. text-decoration:underline;

  33. }

复制代码

Code Source

30、CSS3 斑马线

  1. tbody tr:nth-child(odd) {

  2. background-color: #ccc;

  3. }

复制代码

Code Source

31、有趣的&

  1. .amp {

  2. font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;

  3. font-style: italic;

  4. font-weight: normal;

  5. }

复制代码

Code Source

32、大字段落

  1. p:first-letter{

  2. display: block;

  3. margin: 5px 0 0 5px;

  4. float: left;

  5. color: #ff3366;

  6. font-size: 5.4em;

  7. font-family: Georgia, Times New Roman, serif;

  8. }

复制代码

33、内部CSS3 盒阴影

  1. #mydiv {

  2. -moz-box-shadow: inset 2px 0 4px #000;

  3. -webkit-box-shadow: inset 2px 0 4px #000;

  4. box-shadow: inset 2px 0 4px #000;

  5. }

复制代码

34、外部CSS3 盒阴影

  1. #mydiv {

  2. -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

  3. -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

  4. box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

  5. }

复制代码

35、三角形列表项目符号

  1. ul {

  2. margin: 0.75em 0;

  3. padding: 0 1em;

  4. list-style: none;

  5. }

  6. li:before {

  7. content: "";

  8. border-color: transparent #111;

  9. border-style: solid;

  10. border-width: 0.35em 0 0.35em 0.45em;

  11. display: block;

  12. height: 0;

  13. width: 0;

  14. left: -1em;

  15. top: 0.9em;

  16. position: relative;

  17. }

复制代码

Code Source

36、固定宽度的居中布局

  1. #page-wrap {

  2. width: 800px;

  3. margin: 0 auto;

  4. }

复制代码

Code Source

37、CSS3 列文本

  1. #columns-3 {

  2. text-align: justify;

  3. -moz-column-count: 3;

  4. -moz-column-gap: 12px;

  5. -moz-column-rule: 1px solid #c4c8cc;

  6. -webkit-column-count: 3;

  7. -webkit-column-gap: 12px;

  8. -webkit-column-rule: 1px solid #c4c8cc;

  9. }

复制代码

Code Source

38、CSS固定页脚

  1. #footer {

  2. position: fixed;

  3. left: 0px;

  4. bottom: 0px;

  5. height: 30px;

  6. width: 100%;

  7. background: #444;

  8. }

  9. /* IE 6 */

  10. * html #footer {

  11. position: absolute;

  12. top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

  13. }

复制代码

Code Source

39、IE6的PNG透明修复

  1. .bg {

  2. width:200px;

  3. height:100px;

  4. background: url(/folder/yourimage.png) no-repeat;

  5. _background:none;

  6. _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');

  7. }

  8. /* 1px gif method */

  9. img, .png {

  10. position: relative;

  11. behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

  12. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

  13. this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

  14. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

  15. this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));

  16. }

复制代码

Code Source

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

  1. #container {

  2. min-height: 550px;

  3. height: auto !important;

  4. height: 550px;

  5. }

复制代码

41、CSS3 鲜艳的输入

  1. input[type=text], textarea {

  2. -webkit-transition: all 0.30s ease-in-out;

  3. -moz-transition: all 0.30s ease-in-out;

  4. -ms-transition: all 0.30s ease-in-out;

  5. -o-transition: all 0.30s ease-in-out;

  6. outline: none;

  7. padding: 3px 0px 3px 3px;

  8. margin: 5px 1px 3px 0px;

  9. border: 1px solid #ddd;

  10. }

  11. input[type=text]:focus, textarea:focus {

  12. box-shadow: 0 0 5px rgba(81, 203, 238, 1);

  13. padding: 3px 0px 3px 3px;

  14. margin: 5px 1px 3px 0px;

  15. border: 1px solid rgba(81, 203, 238, 1);

  16. }

复制代码

Code Source

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

  1. /* external links */

  2. a[href^="http://"] {

  3. padding-right: 13px;

  4. background: url('external.gif') no-repeat center right;

  5. }

  6. /* emails */

  7. a[href^="mailto:"] {

  8. padding-right: 20px;

  9. background: url('email.png') no-repeat center right;

  10. }

  11. /* pdfs */

  12. a[href$=".pdf"] {

  13. padding-right: 18px;

  14. background: url('acrobat.png') no-repeat center right;

  15. }

复制代码

Code Source

43、强制换行

  1. pre {

  2. white-space: pre-wrap; /* css-3 */

  3. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

  4. white-space: -pre-wrap; /* Opera 4-6 */

  5. white-space: -o-pre-wrap; /* Opera 7 */

  6. word-wrap: break-word; /* Internet Explorer 5.5+ */

  7. }

复制代码

Code Source

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

  1. a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {

  2. cursor: pointer;

  3. }

复制代码

Code Source

45、网页顶部盒阴影

  1. body:before {

  2. content: "";

  3. position: fixed;

  4. top: -10px;

  5. left: 0;

  6. width: 100%;

  7. height: 10px;

  8. -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

  9. -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

  10. box-shadow: 0px 0px 10px rgba(0,0,0,.8);

  11. z-index: 100;

  12. }

复制代码

Code Source

46、CSS3对话气泡

  1. .chat-bubble {

  2. background-color: #ededed;

  3. border: 2px solid #666;

  4. font-size: 35px;

  5. line-height: 1.3em;

  6. margin: 10px auto;

  7. padding: 10px;

  8. position: relative;

  9. text-align: center;

  10. width: 300px;

  11. -moz-border-radius: 20px;

  12. -webkit-border-radius: 20px;

  13. -moz-box-shadow: 0 0 5px #888;

  14. -webkit-box-shadow: 0 0 5px #888;

  15. font-family: 'Bangers', arial, serif;

  16. }

  17. .chat-bubble-arrow-border {

  18. border-color: #666 transparent transparent transparent;

  19. border-style: solid;

  20. border-width: 20px;

  21. height: 0;

  22. width: 0;

  23. position: absolute;

  24. bottom: -42px;

  25. left: 30px;

  26. }

  27. .chat-bubble-arrow {

  28. border-color: #ededed transparent transparent transparent;

  29. border-style: solid;

  30. border-width: 20px;

  31. height: 0;

  32. width: 0;

  33. position: absolute;

  34. bottom: -39px;

  35. left: 30px;

  36. }

复制代码

Code Source

47、H1-H5默认样式

  1. h1,h2,h3,h4,h5{

  2. color: #005a9c;

  3. }

  4. h1{

  5. font-size: 2.6em;

  6. line-height: 2.45em;

  7. }

  8. h2{

  9. font-size: 2.1em;

  10. line-height: 1.9em;

  11. }

  12. h3{

  13. font-size: 1.8em;

  14. line-height: 1.65em;

  15. }

  16. h4{

  17. font-size: 1.65em;

  18. line-height: 1.4em;

  19. }

  20. h5{

  21. font-size: 1.4em;

  22. line-height: 1.25em;

  23. }

复制代码

Code Source

48、纯CSS背景噪音

  1. body {

  2. background-image: url(data:image/png;base64,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);

  3. background-color: #0094d0;

  4. }

复制代码

Code Source

39、持久的列表排序

  1. ol.chapters {

  2. list-style: none;

  3. margin-left: 0;

  4. }

  5. ol.chapters > li:before {

  6. content: counter(chapter) ". ";

  7. counter-increment: chapter;

  8. font-weight: bold;

  9. float: left;

  10. width: 40px;

  11. }

  12. ol.chapters li {

  13. clear: left;

  14. }

  15. ol.start {

  16. counter-reset: chapter;

  17. }

  18. ol.continue {

  19. counter-reset: chapter 11;

  20. }

复制代码

Code Source

（PS：可参考content属性详解）

50、CSS悬浮提示文本

  1. a {

  2. border-bottom:1px solid #bbb;

  3. color:#666;

  4. display:inline-block;

  5. position:relative;

  6. text-decoration:none;

  7. }

  8. a:hover,

  9. a:focus {

  10. color:#36c;

  11. }

  12. a:active {

  13. top:1px;

  14. }

  15. /* Tooltip styling */

  16. a[data-tooltip]:after {

  17. border-top: 8px solid #222;

  18. border-top: 8px solid hsla(0,0%,0%,.85);

  19. border-left: 8px solid transparent;

  20. border-right: 8px solid transparent;

  21. content: "";

  22. display: none;

  23. height: 0;

  24. width: 0;

  25. left: 25%;

  26. position: absolute;

  27. }

  28. a[data-tooltip]:before {

  29. background: #222;

  30. background: hsla(0,0%,0%,.85);

  31. color: #f6f6f6;

  32. content: attr(data-tooltip);

  33. display: none;

  34. font-family: sans-serif;

  35. font-size: 14px;

  36. height: 32px;

  37. left: 0;

  38. line-height: 32px;

  39. padding: 0 15px;

  40. position: absolute;

  41. text-shadow: 0 1px 1px hsla(0,0%,0%,1);

  42. white-space: nowrap;

  43. -webkit-border-radius: 5px;

  44. -moz-border-radius: 5px;

  45. -o-border-radius: 5px;

  46. border-radius: 5px;

  47. }

  48. a[data-tooltip]:hover:after {

  49. display: block;

  50. top: -9px;

  51. }

  52. a[data-tooltip]:hover:before {

  53. display: block;

  54. top: -41px;

  55. }

  56. a[data-tooltip]:active:after {

  57. top: -10px;

  58. }

  59. a[data-tooltip]:active:before {

  60. top: -42px;

  61. }

复制代码

Code Source

51、深灰色的圆形按钮

  1. .graybtn {

  2. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

  3. -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

  4. box-shadow:inset 0px 1px 0px 0px #ffffff;

  5. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );

  6. background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );

  7. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');

  8. background-color:#ffffff;

  9. -moz-border-radius:6px;

  10. -webkit-border-radius:6px;

  11. border-radius:6px;

  12. border:1px solid #dcdcdc;

  13. display:inline-block;

  14. color:#777777;

  15. font-family:arial;

  16. font-size:15px;

  17. font-weight:bold;

  18. padding:6px 24px;

  19. text-decoration:none;

  20. text-shadow:1px 1px 0px #ffffff;

  21. }

  22. .graybtn:hover {

  23. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );

  24. background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );

  25. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');

  26. background-color:#d1d1d1;

  27. }

  28. .graybtn:active {

  29. position:relative;

  30. top:1px;

  31. }

复制代码

Code Source

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

  1. @media print {

  2. a:after {

  3. content: " [" attr(href) "] ";

  4. }

  5. }

复制代码

Code Source

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

  1. body {

  2. -webkit-touch-callout: none;

  3. -webkit-user-select: none;

  4. -khtml-user-select: none;

  5. -moz-user-select: none;

  6. -ms-user-select: none;

  7. user-select: none;

  8. }

复制代码

54、CSS3 圆点图案

  1. body {

  2. background: radial-gradient(circle, white 10%, transparent 10%),

  3. radial-gradient(circle, white 10%, black 10%) 50px 50px;

  4. background-size: 100px 100px;

  5. }

复制代码

Code Source

55、CSS3 方格图案

  1. body {

  2. background-color: white;

  3. background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),

  4. linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

  5. background-size: 100px 100px;

  6. background-position: 0 0, 50px 50px;

  7. }

复制代码

Code Source

56、Github的fork色带

  1. .ribbon {

  2. background-color: #a00;

  3. overflow: hidden;

  4. /* top left corner */

  5. position: absolute;

  6. left: -3em;

  7. top: 2.5em;

  8. /* 45 deg ccw rotation */

  9. -moz-transform: rotate(-45deg);

  10. -webkit-transform: rotate(-45deg);

  11. /* shadow */

  12. -moz-box-shadow: 0 0 1em #888;

  13. -webkit-box-shadow: 0 0 1em #888;

  14. }

  15. .ribbon a {

  16. border: 1px solid #faa;

  17. color: #fff;

  18. display: block;

  19. font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;

  20. margin: 0.05em 0 0.075em 0;

  21. padding: 0.5em 3.5em;

  22. text-align: center;

  23. text-decoration: none;

  24. /* shadow */

  25. text-shadow: 0 0 0.5em #444;

  26. }

复制代码

Code Source

57、CSS font属性缩写

  1. p {

  2. font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;

  3. }

复制代码

Code Source

58、论文页面的卷曲效果

  1. ul.box {

  2. position: relative;

  3. z-index: 1; /* prevent shadows falling behind containers with backgrounds */

  4. overflow: hidden;

  5. list-style: none;

  6. margin: 0;

  7. padding: 0;

  8. }

  9. ul.box li {

  10. position: relative;

  11. float: left;

  12. width: 250px;

  13. height: 150px;

  14. padding: 0;

  15. border: 1px solid #efefef;

  16. margin: 0 30px 30px 0;

  17. background: #fff;

  18. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

  19. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

  20. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

  21. }

  22. ul.box li:before,

  23. ul.box li:after {

  24. content: '';

  25. z-index: -1;

  26. position: absolute;

  27. left: 10px;

  28. bottom: 10px;

  29. width: 70%;

  30. max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */

  31. max-height: 100px;

  32. height: 55%;

  33. -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

  34. -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

  35. box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

  36. -webkit-transform: skew(-15deg) rotate(-6deg);

  37. -moz-transform: skew(-15deg) rotate(-6deg);

  38. -ms-transform: skew(-15deg) rotate(-6deg);

  39. -o-transform: skew(-15deg) rotate(-6deg);

  40. transform: skew(-15deg) rotate(-6deg);

  41. }

  42. ul.box li:after {

  43. left: auto;

  44. right: 10px;

  45. -webkit-transform: skew(15deg) rotate(6deg);

  46. -moz-transform: skew(15deg) rotate(6deg);

  47. -ms-transform: skew(15deg) rotate(6deg);

  48. -o-transform: skew(15deg) rotate(6deg);

  49. transform: skew(15deg) rotate(6deg);

  50. }

复制代码

Code Source

59、鲜艳的锚链接

  1. a {

  2. color: #00e;

  3. }

  4. a:visited {

  5. color: #551a8b;

  6. }

  7. a:hover {

  8. color: #06e;

  9. }

  10. a:focus {

  11. outline: thin dotted;

  12. }

  13. a:hover, a:active {

  14. outline: 0;

  15. }

  16. a, a:visited, a:active {

  17. text-decoration: none;

  18. color: #fff;

  19. -webkit-transition: all .3s ease-in-out;

  20. }

  21. a:hover, .glow {

  22. color: #ff0;

  23. text-shadow: 0 0 10px #ff0;

  24. }

复制代码

Code Source

60、带CSS3特色的横幅显示

  1. .featureBanner {

  2. position: relative;

  3. margin: 20px

  4. }

  5. .featureBanner:before {

  6. content: "Featured";

  7. position: absolute;

  8. top: 5px;

  9. left: -8px;

  10. padding-right: 10px;

  11. color: #232323;

  12. font-weight: bold;

  13. height: 0px;

  14. border: 15px solid #ffa200;

  15. border-right-color: transparent;

  16. line-height: 0px;

  17. box-shadow: -0px 5px 5px -5px #000;

  18. z-index: 1;

  19. }

  20. .featureBanner:after {

  21. content: "";

  22. position: absolute;

  23. top: 35px;

  24. left: -8px;

  25. border: 4px solid #89540c;

  26. border-left-color: transparent;

  27. border-bottom-color: transparent;

  28. }

复制代码

Code Source

英文原文：
10 Simple & Smart CSS Snippets（1到10）
50 Useful CSS Snippets Every Designer Should Have（11到60）

译文出处：http://www.ido321.com/1565.html

其它一些文章：
15 Useful CSS Tricks You Might Have Overlooked
20 Useful CSS Tips For Beginners
【译】一些你不知道的CSS属性
【译】CSS：7个你可能不认识的单位
【译】CSS：不可思议的border属性
【译】如何实现CSS居中？–CSS居中常用方法
一些常被你忽略的CSS小知识

转载于:https://my.oschina.net/u/2358326/blog/635048

[DIV/CSS] 【译】60个有用CSS代码片段相关推荐

  1. Css学习总结（2）——60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  2. 文60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{position:rela ...

  3. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{position:rela ...

  4. Android有用的代码片段

    有时候,需要一些小的功能,找到以后,就把它贴到了博客下面,作为留言,查找起来很不方便,所以就整理一下,方便自己和他人. 一.  获取系统版本号: [java] view plaincopy Packa ...

  5. iOS 有用的代码片段

    12.判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @&qu ...

  6. logon dialog 的弹出逻辑debug出来了，有很多有用的代码片段

    Sent: Tuesday, 20 October, 2015 8:02 PM 这两天在做UI端的performance优化,昨天Ross发现在My Opportunity Application初始 ...

  7. VSCode自定义代码片段7——CSS动画

    CSS动画 {// CSS'animation// 7 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名 ...

  8. VSCode自定义代码片段6——CSS选择器

    CSS选择器自定义代码片段 { // CSS'selector // 6 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... = ...

  9. html如何自定义一个动画效果,30个纯css动画代码片段和效果演示

    开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...

最新文章

  1. Extjs4 actioncolumn只能显示图标，不能显示文字的暂时解决方法
  2. 用java模仿钉钉_java接入钉钉机器人（附源码）
  3. 对python装饰器几种常见方式的使用与理解
  4. .NET Core 下使用 RabbitMQ
  5. 查找指定日期数据所在分区数据
  6. 2018 牛客多校 2
  7. 如果安卓和linux融合,今年手机厂商大吹特吹的内存融合技术，其实十年前网友就玩腻了...
  8. Js跑马灯效果 在Vue中使用
  9. JAVA VM（HotSpot）
  10. 【光学】Matlab模拟相互垂直的光波叠加
  11. 配置java win10_win10 Java14安装及配置
  12. 【面试问题】进程和线程的区别——通俗易懂
  13. SecureCRT win7 安装破解使用
  14. Python--pygame.Rect
  15. 考虑下面特殊的整数线性规划问题max求和 求和 为非负整数
  16. 华南理工网络教育计算机平时作业,2017年华南理工大学网络教育计算机应用基础平时作业...
  17. diy 单片机 自动浇花_单片机自动浇花系统（附原理图、仿真文件、源程序）
  18. 中国增长最快的机器人市场——IFR《世界机器人报告 2020》(World Robotics 2020 Report)
  19. 在del.icio.us , blinklist 和9Fav之间共享收藏
  20. 光盘属于计算机软件,计算机基础知识光盘的概念

热门文章

  1. 啊哈java_1.桶排序——啊哈算法java实现
  2. 使用计算机画画需要什么软件,专业电脑绘画用的是什么工具？
  3. 性价比高台式计算机,2021年台式电脑什么牌子好，性价比高？
  4. html盒子有哪些属性,盒子模型有哪些属性 在html5中哪些元素具有盒子模型
  5. codeforces C. Design Tutorial: Make It Nondeterministic
  6. c语言中const对于define优点,为什么大多数C开发人员使用define而不是const？
  7. 下载国外网站资料需java_Java开发必知道的国外10大网站
  8. mysql 123456_MySQL字符串中抽取数值的方法 select -(-'123456@163.com'); 很牛逼
  9. java url 本地文件是否存在_我的应用程序知道URL中是否存在文件会一直停止[重复]...
  10. android 远程桌面连接闪退,远程桌面一点连接就闪退，不能弹出输入账号密码窗口...