HTML分隔线如何美化？

2022-04-14 小知识

做HTML页面开发时，在几段文字之间，或几块内容之间，经常会使用分隔线去做分隔，以让页面显示更加有条理。分隔线我们基本上都是用hr标签去生成，怎么去美化这个分隔线？下面一起看下。操作方法 01 先看下我们的html代码，二个p段落，中间用hr作分隔，代码如图。

文章插图

02 页面运行后，可以看到，默认的hr分隔线就是一条黑色的线条，算不上美观。

文章插图

03 通过添加一些样式，我们可以设置hr分隔线的大小和颜色，主要是设置它的border样式。代码如下，
.content hr{
border: 2px solid #cc0000
}

文章插图

04 刷新页面，可以看到效果如图

文章插图

05 【HTML分隔线如何美化？】我们还可以把分隔线默认的实体线改成点划线，只需要把border样式改成如下：border: 1px dashed #cc0000;
效果如图。

文章插图

06 另外如果你需要很复杂的分隔线，就需要用背景图来实现了，我们可以为hr设置背景图，但要注意的是，如果是用背景图，我们一定要设置hr的高度，和把border设置为none，代码如图

文章插图

07 效果如图，我们的分隔线虽然很简单，但也能设置很多样式，能做很好的美化效果。

文章插图

以上内容就是HTML分隔线如何美化？的内容啦，希望对你有所帮助哦！

推荐阅读

上一篇：茶文化旅游深度开发探索3354——以四川省老峨山旅游区为例，海南兰贵人

下一篇：怎样隐藏CAD中的尺寸线？