leven en laten leven

Firefox 好像沒辦法用 outset/inset 做出浮凸或內凹的效果
所以我是自己試著用深淺色搭配的方式做出來的

我的做法如下
浮凸:
上面與左邊, 使用非常淺或非常亮的顏色
下面與右邊, 使用非常深或非常暗的顏色

內凹:
與浮凸相反
上面與左邊, 使用非常深或非常暗的顏色
下面與右邊, 使用非常淺或非常亮的顏色

以我現在的版面為例
我的文章標題底色是黑色
所以框的上面與左邊是白色, 下面與右邊是深灰色
寫出來是像這樣的:
border:1px;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-bottom:2px solid #494949;
border-right:2px solid #494949;

我試過將框線跟框用不同色系做搭配
但我覺得呈現出來的感覺怪怪的
所以後來還是決定使用同色系

在 css 中的 % 可用來控制背景圖片的位置
還有主文與邊欄的位置

背景圖片可用 background-position 來控制
各個位置的碼如下:
left, center, right 分別為: 0%, 50%, 100%
top, center, bottom 分別為: 0%, 50%, 100%
因為我自己不太常調整這個部份
所以細節請各位自己去試試看

主文與邊欄的位置
我是用 width 控制
% 前的數字越大, 就代表那個項目/欄位越寬

像我現在這個版面
就在 #content 裡面設定 width:65%
所以我的主文就佔整個版面寬度的 65%
因為已經指定了 content 的寬度
根據個人判斷
剩下的 35% 應該就是右邊邊欄的寬度
所以我就沒另外再指定邊欄的寬度了

---

參考文章:
固定背景圖片及位置 @ 男丁格爾's 脫殼玩