第十课--边框
原创
©著作权归作者所有:来自51CTO博客作者壹小小俊的原创作品,请联系作者获取转载授权,否则将追究法律责任
无边框 : border-style: none;
虚线边框 : border-style: dotted;
虚线边框 : border-style: dashed;
实线边框 : border-style: solid;
双边框 : border-style: double;
凹槽边框 : border-style: groove;
垄状边框 : border-style: ridge;
嵌入边框 : border-style: inset;
外凸边框 : border-style: outset;
隐藏边框 : border-style: hidden;
边框宽度 : border-width: ?px;
边框颜色 : border-color:?;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边款</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
/*边框*/
p.none {
border-style: none;
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
border-width:13px;
border-color:red;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.hidden {
border-style: hidden;
}