9種超實用CSS技巧幫助設計師和開發者

2024-08-30 08:34:52

字體：大中小

來源：轉載

供稿：網友

一個網頁設計師腦子里一定會被大量與他的工作有關的知識填滿。而說到CSS，它可以幫助對網站進行設計，讓設計具有更多的可能性，用更簡單的方式讓你的網站更具吸引力，而使用傳統的技術這些方面并不容易面面俱到。
對于前端，頁面而言，CSS的確是一門首選需要掌握的技能。
以下就是9種非常實用的CSS3屬性和使用技巧，
1. 圓角效果
談及圓角小編曾在各種討論中頻繁聽見：實現麻煩、兼容困難、性能不佳等等缺點。而如今的Web設計需要的就是各種各樣新的開發技巧，因此越來越多的前端和頁面都開始使用HTML5。
對于HTML5而言，從前必須使用圖片來實現的需求，現在都可以通過代碼來實現。而CSS3中加入的“border-radius”就可以用通過它來直接定義HTML元素的圓角，并支持所有瀏覽器的最新版本。
我可以通過如下代碼實現：

border-radius： 10px; /* CSS3 Property */
-moz-border-radius： 10px; /* Firefox */
-webkit-border-radius： 10px; /* Chrome/Safari */
-khtml-border-radius： 10px; /* Linux browsers */

我們也可以使用下面這樣的組合版本，或者用它來對上面的代碼進行速記。

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

而IE瀏覽器對CSS3屬性支持，可以從這篇英文文章進一步了解。
2. 陰影效果
另一個CSS3可實現的有趣功能是陰影效果（box-shadow），通過“box-shadow”可以非常簡單的實現該功能。我們常見的主流瀏覽器都支持這個屬性，而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代碼也能實現同樣的陰影效果：

object.style.boxShadow=“20px 10px 7px #ccc”

3. @Media屬性
@Media可以直接指定應用樣式引入媒體屬性，用于相同樣式針對不同屏幕尺寸的網頁風格變化，它也有助于響應式網頁設計中的造型變化。通過簡單的修改如下代碼就能實現。

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

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

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

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

background： -webkit-gradient（linear， left top， left bottom， from（darkGray）， to（#7A7A7A））;

5. 背景尺寸
背景尺寸（Background size）是CSS3中最實用的效果之一，目前很多瀏覽器都已經支持。Background size屬性可以讓你隨心所欲的控制背景圖的尺寸大小。
從前用于背景的圖像大小在樣式中是不可調整的，如果你無法想象那樣有多么糟糕，可以試著回憶一下，在自己的電腦桌面上做壁紙的時候遇到一張合乎心意卻偏偏與桌面尺寸不合的圖片，只能通過平鋪來填充。
那樣的桌面丑的讓一個審美觀及格的人都會有砸屏幕的沖動。而現在我們可以通過改變一行代碼讓背景圖片適應自己的頁面。

div
{
background:url（bg.jpg）;
background-size:800px 600px;
background-repeat:no-repeat;
}

6 @font face
屬性在使用CSS3針對各種字體進行轉變的時候已經充分證明了它的實用性。從前因為各種字體許可的問題，在設計過程中只能選擇幾種特定的字體。而通過@font face我們就能自定義字體的名稱：

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

而后我們能通過一個簡單的代碼，隨時隨地的使用自定義的mySmashingFont字體系列

div{font-family:mySmashingFont;}

7. clearfix屬性
如果Overflow： hidden清除浮動的效果實在不是你的首選，那么clearfix應該是你更好的選擇，它可以讓你個別處理不同的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實現的是CSS中最基礎的功能，我們常常也會用它來實現最簡單也最常用的功能—居中。雖然CSS本身沒有一個指定居中的功能，但是通過auto margin指定一個邊距仍然能非常簡單的就實現居中這個功能。
通過這個屬性，用一段簡單的代碼就能實現元素的居中。但需要注意的是，就像以下代碼中那樣，必須給div設定一個寬度。