实用CSS效果

用这篇文章，记录一些平时可能会用到的、或不是一下就能想出来或者是有些奇妙的的CSS效果。

单行居中，多行居左

<h2><p>单行居中，多行居左</p></h2>  h2{text-align:center} p{display:inline-block;text-align:left;} 

适应容器的背景图

背景图片不会因为容器的宽高进行拉伸，图片宽高比例不会有变化，以容器中心为中心，超出的部分不显示。

background:url("./xxxx.jpg") no-repeat; background-size: cover; background-position: center center; 

文字超出容器显示省略号

需要容器具有一个固定的宽度，这样的话，如果文字太长能让他以省略号（...）的形式处理超出的文字。

overflow: hidden;     text-overflow:ellipsis;     white-space: nowrap; 

比12px更小的文字

有时候设计图设计出来的文字是比12px更小的，而像chrome这样的浏览器，最小的文字也是12px,所以可以用css的scale属性，设置出比12px更小的文字

transform:scale(0.7); -webkit-transform-origin-x: 0; 

CSS语音，wifi样式

只用一个dom元素，利用伪类写的一个语音播放的样式，去掉动画也能当一个wifi

<div class="voice-box"></div>  .voice-box{     position:relative;     width:8px;     height:8px;     border-radius:50%;     background:#999; } .voice-box:before{     content:" ";     position: absolute;     top:-16px;		/*当前元素总高度（height+border）减去顶点元素的一半高度（height/2）*/     left:-18px;		/*与top相当，具体微调*/     width:24px;     height:24px;     border: 8px solid transparent;     border-right: 8px solid #999;     border-radius: 50%;     animation: fadeInOut 1s infinite 0.2s;. } .voice-box:after{     content:" ";     position: absolute;     top:-28px;     left:-28px;     width:48px;     height:48px;     border: 8px solid transparent;     border-right: 8px solid #999;     border-radius: 50%;     animation: fadeInOut 1s infinite 0.4s; } @keyframes fadeInOut {     0% {         opacity: 0;     }     100% {         opacity: 1;     } }