<h2 CSS 輪廓（Outline)實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實例 CSS 表格實例....
CSS 輪廓（Outline)實例
CSS 實例
- CSS 背景實例
- CSS 文本實例
- CSS 字體(font)實例
- CSS 邊框(border)實例
- CSS 外邊距 (margin) 實例
- CSS 內邊距 (padding) 實例
- CSS 列表實例
- CSS 表格實例
輪廓（Outline)實例- CSS 尺寸 (Dimension) 實例
- CSS 分類 (Classification) 實例
- CSS 定位 (Positioning) 實例
- CSS 偽類 (Pseudo-classes)實例
- CSS 偽元素 (Pseudo-elements)實例
01在元素周圍畫線
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01在元素周圍畫線</title>
<style type="text/css">
p {
border: darkorange solid thin;
outline: salmon dotted thick;
}
</style>
</head>
<body>
<p>我是一個有border有outline的段落。</p>
</body>
</html>
02設置輪廓的顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>02設置輪廓的顏色</title>
<style type="text/css">
p {
border: darkorange solid thin;
outline-color: skyblue;
outline-style: double;
}
</style>
</head>
<body>
<p>我是一個有border有outline的段落。</p>
</body>
</html>
03設置輪廓的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03設置輪廓的樣式</title>
<style type="text/css">
p {
border: darkorange solid thin;
}
p.dotted {
outline-style: dotted;
}
p.dashed {
outline-style: dashed;
}
p.solid {
outline-style: solid;
}
p.double {
outline-style: double;
}
p.groove {
outline-style: groove;
}
p.ridge {
outline-style: ridge;
}
p.inset {
outline-style: inset;
}
p.outset {
outline-style: outset;
}
</style>
</head>
<body>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
</body>
</html>
04設置輪廓的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>04設置輪廓的寬度</title>
<style type="text/css">
p.one {
border: seagreen solid thin;
outline-style: solid;
outline-width: thin;
}
p.two {
border: seagreen solid thin;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<p class="one">我是一個段落啊。</p>
<p class="two">我是一個段落啊。</p>
</body>
</html>
