CSS学习、Day04

最新推荐文章于 2021-03-18 07:43:26 发布

不是艳阳

最新推荐文章于 2021-03-18 07:43:26 发布

阅读量266

点赞数

分类专栏： Html CSS 文章标签： css

本文链接：https://blog.csdn.net/buruoyanyang/article/details/53671381

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Html

8 篇文章 0 订阅

订阅专栏

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

设置边框

<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>