進階網站入門

  • 文章分類: 學CSS
  • 9/29/2010

漸層背景

( 範例一 )
  • 步驟一.在HTML新增一個div class作為漸層區塊。
  • 步驟二.至CSS設定漸層區塊所需的寬高與色碼
  • 步皺三.在CSS將該class的內容設定為
.cex-gradient
{
width:680px;
height:300px;
background: linear-gradient(#b9c4f5,#6e7cbe);
}

說明：
background: linear-gradient(#b9c4f5,#6e7cbe):
分別解釋為、背景色、線性漸層、雙色漸層。
完成以上三步驟後即形成( 範例一 )的漸層背景。

圓邊框

( 範例二 )
  • 步驟一.在html裡新增div class作為圓框區塊。
  • 步驟二.在css裡新增class設定圓框內容。
  • 步驟三.將CSS的內容設定為：
.cex-round
{
width:680px;
height:300px;
border-radius:30px;
background:#b9c4f5;
}
說明:
width:680px:寬度
height:300px:高度
border-radius:30px:圓角尺寸
background:#b9c4f5:圓框背景色
完成以上步驟後即形成( 範例二 )的圓邊框。

變化形按鈕

滑我

（圖三）

  • 步驟一.在html裡新增div class作為按鈕區塊。
  • 步驟二.在CSS裡設定新增的class內容與其hover來增加互動性。
  • 步驟三.將CSS的內容設定為： 
.cex-button
{
width:300px;
height:100px;
border-radius:50px 10px 50px 10px;
background: linear-gradient(#34cabd,#6e7cbe);
float:left;
margin:0 calc(50% - 150px);
font-size:18px;
color:#fff;
line-height:100px
}
.cex-button:hover
{
background: linear-gradient(#6e7cbe,#34cabd);
color:#4b5986;
}         
說明：
border-radius:50px 10px 50px 10px:將四個角用兩種不同參數來增加造型，參數依序為:左上、右上、右下、左下。
.cex-button:hover:為了讓使用者在瀏覽網頁時有參與感，大部分按鈕都會設定hover讓游標滑過時按鈕有所變化。
在此我只想改變漸層色與字體顏色的變化，因此其他屬性與值都保留繼承的方式，就不必再寫一次了。
完成以上步驟後即形成(圖三)的按鈕。

重點提醒

  • 只要CSS裡有包含裁圖的設計就需新增一個叫graphics的資料夾，圖片名稱可自行命名。
  • 圖片的格式可為jpg、gif、png檔。
  • gif檔及png檔可以設定透明背景，png檔品質較佳。
※背景圖片延伸設定:
{background:url() no-repeat}→不重複
{background:url() repeat- x}→橫向重複（← →）
{background:url() repeat- y}→縱向重複（↑↓）
{background:url() repeat}→ 橫縱向重複（← →↑↓）