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