h5 学习笔记：border-left 调整描边高度

最新推荐文章于 2022-07-27 20:09:51 发布

原创最新推荐文章于 2022-07-27 20:09:51 发布 · 8.3k 阅读

7 ·

CC 4.0 BY-SA版权

javascript和Egret相关专栏收录该内容

97 篇文章

订阅专栏

本文探讨了在CSS中优化带有文本的左侧描边高度的方法。通过比较直接使用border-left和利用伪元素:before的不同效果，介绍了如何通过调整:before的高度和位置实现更美观的描边效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要写很多的border-left 描边，这些描边要带上文字。在开始的时候，一般会直接使用border-left ，但发现这个描边会手div高度影响，比文字的高度还要高。今天，发现了使用before的一种写法可以调整描边的色的高度。
在这里插入图片描述

从图上可以看到左边色块高度和文本相差很多，导致不美观。造成这样，我们看一下它的写法。从样式ui-top-view 可以看到，这个定义一个div 高度为 30px，line-height 也为30px，这个为了让文本产生垂直居中。接下来，div中文本使用了border-left: 4px solid orangered; 这一句让其产生一个描边。但他的高度看起来并不好看。我们希望可以缩小一点。但这个设置高度方式并不友好。好像没发现有对应的API。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.ui-top-view{
			 
			height: 30px;
			line-height: 30px;
			
		}
		
		.ui-top-title{
			border-left: 4px solid orangered; 
			padding-left: 15px;
		 
		}
		
	</style>
	<body>
		
		<div class="ui-top-view">
			 <div class="ui-top-title">今日精选</div>
		</div>
		
	</body>
</html>

接下来，我们尝试了第二个方案。将文本里面加入before做法。我们先看看效果图。描边色块接近文本的高度，看起来美观度比上面好一点。
在这里插入图片描述

它的做法是引入css 的before处理，相当于在文本前面插入一个元素。并对元素进行描边。我们可以对其进行高度的调整，所以我们加入inline-block的方式让其可以修改高度有效果。并通过一个定位进行微调描边的色块。有了这个设置后。我们的色块和文本也接近高度，看起来会更加美观一点。

 .ui-top-title:before{
		   content: ' ';
		   border-left: 4px solid orangered;
		    display: inline-block;
		    height: 16px;
		    position: absolute;
		    top: 50%;
		    left: 0;
		    margin-top: -13px;
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.ui-top-view{
			 
			height: 30px;
			line-height: 30px;
			
		}
		
		.ui-top-title{ 
			 
		   padding-bottom: 10px;
			border-bottom: 1px  solid #EBEBEB;
			position: relative;
			padding-left: 15px; 
		}
		
		 .ui-top-title:before{
		   content: ' ';
		   border-left: 4px solid orangered;
		    display: inline-block;
		    height: 16px;
		    position: absolute;
		    top: 50%;
		    left: 0;
		    margin-top: -13px;
		} 
		
		
		
	</style>
	<body>
		
		<div class="ui-top-view">
			 <div class="ui-top-title">今日精选</div>
		</div>
		
	</body>
</html>

经过以上实验，使用css before 来达到修改描边高度的目的。不知道还有没有更加直接方式呢。