html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月4日 星期日

CSS border 邊框

CSS border 邊框 / CSS border-radius 邊框圓角
CSS 邊框邊線 介紹


邊框:
CSS 中透過 border-style 設定邊框的樣式,可以一次設定四個邊框,也可以分別設定各個邊框樣式,網頁中的許多元素,特別是 DIV . span.mig 等等的邊框樣式,都可以使用 border-style 來設計,border-style 要能正確顯示,通常會同時包含 云border-width(邊框寬度)以及 border-color(邊框顏色)的搭配,幾乎所有的主流瀏覽器都支援 CSS border-style 的邊框樣式屬性。

邊框圓角:
border-radius 左上角 右上角 右下角 左下角(順時針順序)。
CSS3 border-radius 属性
border-radius是CSS3設置圓角的一個屬性,其屬性值得單位可以使用:em、px、百分比等等。但是,border-radius屬性值得參數形式有好多種,那麼具體都代表什麼意思呢?下面以實際例子分析一下:

邊線的風格樣式
border-style:solid : 實線
border-style:dotted :點線
border-style:dashed: 虛線
border-style:double:雙線
border-style:groove: 凹線
border-style:ridge: 凸線
border-style:outset:浮出線
border-style:inset: 嵌入線
border-bottom-style:dotted: 單邊(底)設定虛線

border-radius 左上角 右上角 右下角 左下角(順時針順序)。
border: 5px solid red;
border-radius:40px 0px 40px 0px;
border: 5px solid yellow;
border-radius: 0px 40px 0px 40px;
border: 5px double magenta;
border-radius: 40px 40px 40px 40px;

border: 10px dotted magenta;
border-radius:50% 0px 0px 50% ;
border: 10px groove olivedrab;
border-radius:0px 50% 50% 0px;
border: 10px ridge pink;
border-radius:50% 50% 50% 50%;

右上圓角
border: 3px solid black
border-radius:20px 0px 0px 0px
左上圓角
border: 10px inset pink
border-radius:0px 20px 0px 0px;
右下圓角
border: 10px outset yellowgreen
border-radius:0px 0px 20px 0px;
左下圓角
border-style: dotted dashed solid double
border-radius:0px 0px 0px 20px;

border-radius: 80px / 10px
border: 3px solid black
border: 10px groove olivedrab;
border: 10px ridge pink;

border-style: inset
border-color: red
border-width:1px 5px 10px 50px
border: 10px outset yellowgreen
border-style: hidden solid solid solid
border-left:30px double #66f ; border-right:30px double #f00
border-top:30px double #6d3 ; border-bottom:30px double #f6f

測試邊框寬度效果
border-width:31px 10px 2px 10px;padding:5px;



00

沒有留言:

張貼留言