如何掌握CSS 轮廓技巧
1、让元素的周围多上一条美丽的方框就是这个CSS轮廓工具可以做到的。
<style type="text/css">
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
2、轮廓本身也是一个样式丰富的元素，我们可以为它赋值为各种的颜色。
<style type="text/css">
p
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}
</style>
3、在同一个style当中也可以让轮廓有着多种不同的样式表现。
<style type="text/css">
p
{
border: red 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>
4、轮廓也是一个有精细大小的元素。它可以被赋值。
<style type="text/css">
p.one
{
border:red solid thin;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:red solid thin;
outline-style:dotted;
outline-width:3px;
}
</style>
5、CSS 框模型。我们要了解元素与框之间的关系就要通过透视图去彻底的分析一下。
outline/margin/border/padding/element
6、我们要精确的放置元素就必须定义好它的四个边的内边距。
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
