【CSS教學】CSS語法整理-《框線屬性&背景屬性》－玩美計劃*開始享瘦

CSS串聯樣式表教學『框線屬性一覽』
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用一般的方式如下:
border-top-color : #369 /*設定上框線top色彩*/
border-top-width :1px /*設定上框線top寬度*/
border-top-style : solid/*設定上框線top樣式*/
其他框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮凸框*/
inset /*凹框*/
outset /*凸框*/

框線樣式運用範例

框線樣式簡說
border: 1px solid #6699cc;
邊框虛線效果就把solid的地方改為dotted
邊框線設粗一點就改變1px設為2px以上
邊框線色彩 #6699cc

框線樣式範例運用

這是一個綠色虛線框的區塊

圖片邊框
img{border:0px;} /*刪除所有圖片邊框*/

框線樣式簡化寫法
border:10px; /*四邊界一起宣告相同值*/
border:10pt 5pt 0pt 5pt;/*宣告四邊不同值順序為上、右、下、左*/
border: 1px solid #6699cc; /*宣告四邊同樣屬性*/

CSS串聯樣式表教學『背景屬性一覽』
background-color:#F5E2EC; /*背景色彩*/
background:transparent; /*透視背景*/
background-image : url(image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重複排列-網頁預設*/
background-repeat : no-repeat; /*不重複排列*/
background-repeat : repeat-x; /*在x軸重複排列*/
background-repeat : repeat-y; /*在y軸重複排列*/
指定背景位置 [ 以下方式皆可使用 ]
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : bottom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*置中對齊*/

資料整理自http://www.hsiu28.net/style/index.php