用這篇文章，記錄一些平時可能會用到的、或不是一下就能想出來或者是有些奇妙的的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 ></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;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/280201.html
標籤：其他
上一篇：前端工程師進階之旅-手撕代碼【前端常用方法以及面試常見題】
下一篇：網頁布局之盒子模型