工作這麼多年,
有累積一些常見的問題,
整理出來。
1.陰影的使用
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
2.文字斷行
pre {
white-space: pre-line;
word-wrap: break-word;
}
3.文字模糊
先把文字設定透明,之後用 text-shadow 淡淡的陰影
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
4.簡單的 loading 動畫
5.清浮動
舊版的方式
.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%; }
新的用法
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
6.隱藏文字
方法一:以前比較多人使用,但是如果 RWD 多少會出現錯誤
text-indent: -99999px;
方法二:這是比較常多人使用
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
方法三:但是用這方式印刷印不出來
content:url(http://flora.inow.tw/img/f2e-logo-bl.jpg);
方法四:隱藏的方式
span{display:none;}
方法五:bootstrap 使用的方法
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
7.底圖的用法
原尺寸
-webkit-background-size:auto; /*for Google Chrome、Safari*/
-moz-background-size:auto; /*for Firefox*/
-o-background-size:auto; /*for Opera*/
background-size:auto; /*for IE*/
滿版圖片不變形
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
指定寬高
-webkit-background-size:200px 150px;
-moz-background-size:200px 150px;
-o-background-size:200px 150px;
background-size:200px 150px;
指定寬高百分比
-webkit-background-size:50% 100%;
-moz-background-size:50% 100%;
-o-background-size:50% 100%;
background-size:50% 100%;