CSS学习、Day04

来源：互联网发布：价目表模板软件编辑：程序博客网时间：2024/05/17 22:44

又又又又好久没写了…
今天要学习的是如何给文本设置各种各样的边框。

设置边框

<html><head><style type="text/css">p {border: medium double rgb(250,0,255)}</style></head><body><p>这是一行。</p></body></html>

这是最简单的边框写法，直接给文字设置了默认的边框以及边框的颜色。

设置边框样式

<html><head><style type="text/css">p.dotted {border-style: dotted}p.dashed {border-style: dashed}p.solid {border-style: solid}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}</style></head><body><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></body></html>

我们可以通过border-style属性来设置对应边框的边框效果，比如虚线、浮层、实线这些效果。

单独设置边框

<html><head><style type="text/css">p.soliddouble {border-style: solid double}p.doublesolid {border-style: double solid}p.groovedouble {border-style: groove double}p.three {border-style: solid double groove}</style></head><body><p class="soliddouble">这是一段话。</p><p class="doublesolid">这是一段话。</p><p class="groovedouble">这是一段话。</p><p class="three">这是一段话。</p></body></html>

如果我们的ui需要设置不同边框样式，使用这个方法，需要注意的是，在这个方法中，第一个属性对应的是横排边框，第二个属性对应的是竖排边框。
以上，我们分开写的方法显然是看起来不够高级的，我们也可以像background一样，把所有的属性都写在一起，如p { border-style: solid; border-width: 5px}

设置不同边框的不同样式

如果我们的ui要每个边框都不一样，我们也是可以做到的。

<html><head><style type="text/css">p {border-style:solid;border-bottom:thick dotted #ff0000;}</style></head><body><p>这是一段话。</p></body></html>

我们可以使用border-bottom属性来设置下边框属性，同理也有left，right，top属性可以分开设置这些属性。
当然我们也能为各个边框设置不同的颜色，宽度，样式等等，具体方法就是将几个属性写到一起即可。

0 0