怎么画竖线? - css笔记

我们可以用CSS来画一个,那么一些颜色、宽度、边距啥的属性都可以轻松的自定义,用起来也很方便

在平时的网页布局中,我们经常会用到竖线来进行一些有趣的分割,如果只是单纯的用符号来做,那么一些颜色、宽度、边距啥的都不怎么方便,这个时候我们可以用CSS来画一个,这些属性都可以轻松的自定义。

实际效果如下:

举杯邀明月,对影成三人。

这段话的末尾有一条红色竖线好了,没了

HTML:

<div class="nbox-main">
	<div class="nbox-yue">举杯邀明月,对影成三人。</div>
	<br>
	这段话的末尾有一条红色竖线<span></span>好了,没了
</div>

CSS:

<style type="text/css">

.nbox-main span {
	border-right: 2px solid #b52424;/*粗细、样式、颜色*/
	margin: 0 10px;/*边距*/
	padding-top: 4px;/*长度*/
}

.nbox-yue::after {
	content: "";
	border-right: 3px solid #111;/*粗细、样式、颜色*/
	margin: 0 20px;/*边距*/
	padding-top: 20px;/*长度*/
}
	
</style>
国外主题

Cavan - 独特的WordPress博客主题

2019-11-29 7:13:10

国外主题

InHype - 博客和杂志WordPress主题

2020-8-22 8:41:07

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索