一些实用的css代码段

1、一般情况下我们发现元素宽度用百分比好使而高度却不好使，那么怎么让高度可以用百分比来控制呢。

html, 
body {
    height: 100%;
}

div {
    height: 100%;
    background-color:red;
}

2、纯css实现按钮渐变动画

<div class="container">
	<button disabled>The Button</button>
	<div class="slider"></div>
	<div class="frame">Transition</div>
</div>

	.container {
		position: relative;
		margin: 0 auto;
		width: 480px;
		height: 140px;
		background-color: #f5f5f5;
		border-radius: 4px;
		border: 1px solid #ddd;
	}

	button {
		position: absolute;
		padding: 10px 20px;
		top: 50px;
		left: 50px;
		border: none;
		border-radius: 4px;
		color: #fff;
		font: 16px sans-serif;
		
		/* set up background gradient and animation */
		background-image: linear-gradient(#36d279, #1d854a);
		background-size: auto 200%;
		background-position: 0 100%;
		transition: background-position 0.5s;
	}
	.container:hover button {
		/* shift background gradient position */
		background-position: 0 0;
		cursor: pointer;
	}

	.slider {
		position: absolute;
		top: 50px;
		right: 50px;
		margin-top: -32px;
		width: 160px;
		height: 72px;
		background-image: linear-gradient(#36d279, #1d854a);
		transition: margin-top .5s;
	}
	.container:hover .slider {
		margin-top: 0px;
	}

	.frame {
		position: absolute;
		top: 50px;
		right: 50px;
		box-sizing: border-box;
		padding: 10px 0;
		border: solid 1px #ccc;
		border-radius: 4px;
		color: #fff;
		font: 16px sans-serif;
		width: 160px;
		text-align: center;
	}

3、表格宽度自适应

td {
    white-space: nowrap;
}

4、为盒子的任意一边添加阴影

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

5、文本自动换行

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

6、文本模糊

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

7、纯css实现loading动画

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

8、css3背景全屏

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

9、强制出现滚动条

html { height: 101% }

10、IE下的PNG透明修复

.bg {
    width:200px;
    height:100px;
    background: url(/folder/yourimage.png) no-repeat;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}


/* 1px gif method */
img, .png {
    position: relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

11、样式重置

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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

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