掛在網路上。葵

關於部落格
說是喜怒哀樂 也不為過
  • 17179

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

CSS 語法 邊框設定

在部落格中 ,不管是標題、文章、公告、選單 、導航都是一個一個框(格) 所包住~
只是CSS語法讓那個框顯示、隱藏;框的線條是實線、虛線、點線...

「border」是指邊框樣式   在CSS 寫成

這是比較正式的寫法
border-style:solid;     
border-width:3;
border-color:Green;

簡化的寫法
border:3px double #FFCC66;


設定框線粗細(寬度)

上下左右的框線  預設值為中等(medium) 、細(thin)、 (thick)等
border-top-width       上方框線寬度
border-right-width     右方框線寬度
border-bottom-width    下方框線寬度
border-left-width      左方框線寬度

可以簡化成  
{border-width: 1px 2px 3px 4px;}
後方的數字 是指 上 右 下 左 (順時針方向) 要空一格唷!

 

設定框線樣式

border-top-style        上方框線樣式
border-right-style      右方框線樣式
border-bottom-style     下方框線樣式
border-left-style       左方框線樣式

可以簡化成
{border-style: dotted dashed solid double;}
一樣是 上 右 下 左 (順時針方向) 要空一格唷!

預設值為無(none)。
其他屬性包括隱藏(hidden)、點狀線(dotted)、虛線(dashed)、實線(solid)、雙線(double)、
凹陷(groove)、凸起(ridge)、嵌入(inset),以及鑲出(outset)等。

 

設定框線顏色

border-top-color      上方框線顏色
border-right-color    右方框線顏色
border-bottom-color   下方框線顏色
border-left-color     左方框線顏色

可以簡化成 
{border-color: red yellow orange black;}
一樣是 上 右 下 左 (順時針方向) 要空一格唷!

 

設定某一個框線的粗細

{border-top: 1px dotted red;}           上方框線
{border-right: 2px dashed yellow;}   右方框線
{border-bottom: 3px solid orange;}   下方框線
{border-left: 4px double black;}        左方框線

 

這樣大家有沒有比較瞭解了^0^
himari 也是學到很多唷!

相簿設定
標籤設定
相簿狀態