Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

### 一、 CSS3圓角框設定

1. 整體：border-radius: 5px;
2. 上左：border-top-left-radius: 5px;
3. 上右：border-top-right-radius: 5px;
4. 下左：border-bottom-left-radius: 5px;
5. 下右：border-bottom-right-radius: 5px;
6. 基本上可以分開設定寬和高，亦可用%或各種css單位來顯示
 
### 二、 一個效果各自表述：前綴詞

1. IE前綴詞：-ms-
2. FireFox前綴詞：-moz-
3. Opera前綴詞：-o-
4. chrome或safari：-webkit-
 
### 三、 box-shadow盒子陰影

1. box-shadow:none; 無陰影
2. box-shadow: 水平偏移 垂直偏移 模糊值 延伸值 顏色 inset; （除了模糊值外，其餘皆可負值）
 
### 四、 border-image花邊設定 （[花邊圖1](http://www.tad0616.net/uploads/tad_book3/file/border.png) ，[花邊圖2](http://www.tad0616.net/uploads/tad_book3/file/border.jpg)）

1. 搭配border:20px solid transparent;使用
2. border-image: 圖片來源 圖片切割範圍 背景圖片寬度 超界幅度 背景圖顯示方式 
  - (1) 圖片來源：用 url(圖片位置)來載入圖片，如url(images/border.png)
  - (2) 圖片切割範圍：將圖片以九宮格方式切開，其切割的寬高，如：27 即上右下左切用27x27去切割。若 27 13 則是上下用27切割，左右用13切割
  - (3) 背景圖片寬度：預設為1，若是2表示用一張底圖放大成兩倍位置，由於同為數字，可能會和前面的切割範圍混淆，故加個 / 以區隔之。
  - (4) 超界幅度：圖片在外框上的位置，若0則是從外框內部開始套用，越大就越往外。
  - (5) 背景圖顯示方式：repeat（重複填滿）、stretch（拉長）、round（重複填滿並自動調整圖片，預設）

:::