幫助設(shè)計師和開發(fā)者的9種實用CSS技巧
一個網(wǎng)頁設(shè)計師腦子里一定會被大量與他的工作有關(guān)的知識填滿。而說到CSS，它可以幫助對網(wǎng)站進行設(shè)計，讓設(shè)計具有更多的可能性，用更簡單的方式讓你的網(wǎng)站更具吸引力，而使用傳統(tǒng)的技術(shù)這些方面并不容易面面俱到。
對于前端，頁面而言，CSS的確是一門首選需要掌握的技能。以下就是9種非常實用的CSS3屬性和使用技巧。
1. 圓角效果
談及圓角小編曾在各種討論中頻繁聽見：實現(xiàn)麻煩、兼容困難、性能不佳等等缺點。而如今的Web設(shè)計需要的就是各種各樣新的開發(fā)技巧，因此越來越多的前端和頁面都開始使用HTML5。
對于HTML5而言，從前必須使用圖片來實現(xiàn)的需求，現(xiàn)在都可以通過代碼來實現(xiàn)。而CSS3中加入的“border-radius”就可以用通過它來直接定義HTML元素的圓角，并支持所有瀏覽器的最新版本。
我可以通過如下代碼實現(xiàn)：
1 2 3 4 |
border-radius: 10px; /* CSS3 Property */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome/Safari */ -khtml-border-radius: 10px; /* Linux browsers */ |
我們也可以使用下面這樣的組合版本，或者用它來對上面的代碼進行速記。
1 |
-moz-border-radius: 10px 20px 30px 0; |
2. 陰影效果
另一個CSS3可實現(xiàn)的有趣功能是陰影效果（box-shadow），通過“box-shadow”可以非常簡單的實現(xiàn)該功能。我們常見的主流瀏覽器都支持這個屬性，而Safari瀏覽器支持可選加前綴的-webkit-box-shadow屬性。
代碼包括：
1 2 3 4 5 |
#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}
|
而如下的JavaScript代碼也能實現(xiàn)同樣的陰影效果：
1 |
object.style.boxShadow="20px 10px 7px #ccc" |
3. @Media屬性
@Media可以直接指定應(yīng)用樣式引入媒體屬性，用于相同樣式針對不同屏幕尺寸的網(wǎng)頁風(fēng)格變化， 它也有助于響應(yīng)式網(wǎng)頁設(shè)計中的造型變化。通過簡單的修改如下代碼就能實現(xiàn)。
1 2 3 |
@media screen and (max-width: 480px) {
}
|
而使用如下的@media print甚至可以指定CSS的打印預(yù)覽：
1 2 3 4 |
@media print
{
p.content { color: #ccc }
}
|
4. 添加一個漸變填充
在CSS3中的漸變效果是另一個讓人驚嘆的屬性。它目前還未得到全部瀏覽器的支持，因此最好不要完全依賴它來設(shè)置布局。而這里有一個基于CSS的梯度導(dǎo)航欄可以讓大家參考一下。
以下是實現(xiàn)的方式。
1 |
background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A)); |
5. 背景尺寸
背景尺寸（Background size）是CSS3中最實用的效果之一，目前很多瀏覽器都已經(jīng)支持。Background size屬性可以讓你隨心所欲的控制背景圖的尺寸大小。
從前用于背景的圖像大小在樣式中是不可調(diào)整的，如果你無法想象那樣有多么糟糕，可以試著回憶一下，在自己的電腦桌面上做壁紙的時候遇到一張合乎心意卻偏偏與桌面尺寸不合的圖片，只能通過平鋪來填充。
[!--empirenews.page--]
那樣的桌面丑的讓一個審美觀及格的人都會有砸屏幕的沖動。而現(xiàn)在我們可以通過改變一行代碼讓背景圖片適應(yīng)自己的頁面。
1 2 3 4 5 6 |
div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}
|
6 @font face
屬性在使用CSS3針對各種字體進行轉(zhuǎn)變的時候已經(jīng)充分證明了它的實用性。從前因為各種字體許可的問題，在設(shè)計過程中只能選擇幾種特定的字體。而通過@font face我們就能自定義字體的名稱：
1 2 3 4 5 6 7 |
@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */
}
|
而后我們能通過一個簡單的代碼，隨時隨地的使用自定義的mySmashingFont字體系列
1 2 3 4 |
div
{
font-family:mySmashingFont;
}
|
7. clearfix屬性
如果Overflow: hidden清除浮動的效果實在不是你的首選，那么clearfix應(yīng)該是你更好的選擇，它可以讓你個別處理不同的HTML元素。
1 2 3 |
.clearfix {
display: inline-block;
}
|
1 2 3 4 5 6 7 8 |
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
|
8. Margin: 0 auto
Margin: 0 auto實現(xiàn)的是CSS中最基礎(chǔ)的功能，我們常常也會用它來實現(xiàn)最簡單也最常用的功能—居中。雖然CSS本身沒有一個指定居中的功能，但是通過auto margin指定一個邊距仍然能非常簡單的就實現(xiàn)居中這個功能。
通過這個屬性，用一段簡單的代碼就能實現(xiàn)元素的居中。但需要注意的是，就像以下代碼中那樣，必須給div設(shè)定一個寬度。
1 2 3 4 5 |
.myDiv {
margin: 0 auto;
width:600px;
}
|
9. Overflow: hidden
Overflow：Hidden，它做作用主要是隱藏溢出，而就像上述提到的，人們都很少用到其另外一個功能，就是清除浮動。
1 2 3 4 |
div
{
overflow:hidden;
}
|
下載文檔
