9種超實(shí)用CSS技巧幫助設(shè)計(jì)師和開發(fā)者

2024-08-30 08:34:52

字體：大中小

供稿：網(wǎng)友

一個(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的確是一門首選需要掌握的技能。
以下就是9種非常實(shí)用的CSS3屬性和使用技巧，
1. 圓角效果
談及圓角小編曾在各種討論中頻繁聽見：實(shí)現(xiàn)麻煩、兼容困難、性能不佳等等缺點(diǎn)。而如今的Web設(shè)計(jì)需要的就是各種各樣新的開發(fā)技巧，因此越來(lái)越多的前端和頁(yè)面都開始使用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)：

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)行速記。

-moz-border-radius： 10px 20px 30px 0;

而IE瀏覽器對(duì)CSS3屬性支持，可以從這篇英文文章進(jìn)一步了解。
2. 陰影效果
另一個(gè)CSS3可實(shí)現(xiàn)的有趣功能是陰影效果（box-shadow），通過(guò)“box-shadow”可以非常簡(jiǎn)單的實(shí)現(xiàn)該功能。我們常見的主流瀏覽器都支持這個(gè)屬性，而Safari瀏覽器支持可選加前綴的-webkit-box-shadow屬性。
代碼包括：

#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)同樣的陰影效果：

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)。

@media screen and （max-width： 480px） {
}

而使用如下的@media print甚至可以指定CSS的打印預(yù)覽：

@media print
{
p.content { color： #ccc }
}

4. 添加一個(gè)漸變填充
在CSS3中的漸變效果是另一個(gè)讓人驚嘆的屬性。它目前還未得到全部瀏覽器的支持，因此最好不要完全依賴它來(lái)設(shè)置布局。而這里有一個(gè)基于CSS的梯度導(dǎo)航欄可以讓大家參考一下。
以下是實(shí)現(xiàn)的方式。

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)填充。
那樣的桌面丑的讓一個(gè)審美觀及格的人都會(huì)有砸屏幕的沖動(dòng)。而現(xiàn)在我們可以通過(guò)改變一行代碼讓背景圖片適應(yīng)自己的頁(yè)面。

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我們就能自定義字體的名稱：

@font-face
{
font-family： mySmashingFont;
src： url（‘blitz.ttf’）
，url（‘blitz.eot’）; /* IE9 */
}

而后我們能通過(guò)一個(gè)簡(jiǎn)單的代碼，隨時(shí)隨地的使用自定義的mySmashingFont字體系列

div{font-family:mySmashingFont;}

7. clearfix屬性
如果Overflow： hidden清除浮動(dòng)的效果實(shí)在不是你的首選，那么clearfix應(yīng)該是你更好的選擇，它可以讓你個(gè)別處理不同的HTML元素。

.clearfix {
display： inline-block;
}

.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è)寬度。