问题描述:
在只使用一个标签的情况下实现左边竖线,通用标签与样式如下:
实现左边竖线
html:
<div>实现左边竖线</div>
css:
web前端开发学习Q-q-u-n: 767273102,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
.div1 {
width: 200px;
height: 50px;
line-height:50px;
text-align: center;
background: #ccc;
position: relative;
}
方法一:使用border
.div1 { border-left: 5px solid red;}
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,工作第六个年头了,与大家分享一些学习方法,实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端
方法二:使用伪元素来实现
每个标签都会有before及after两个伪元素,并且我们也经常用这类标签做一些Icon之类的小图标。这里我们使用伪元素,也会很容易来实现想要的效果。
.div1::before {
content: "";
width: 5px;
height:50px;
position: absolute;
top: 0;
left: 0;
background: red;
}
方法三:内/外阴影
使用内阴影或者外阴影也能实现此效果,不过在有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,其他浏览器没遇到。
/* 内阴影 */
.div1{
box-shadow:inset 5px 0px 0 0 red;
}
/* 外阴影 有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,显示效果如下图*/
.div1{
box-shadow:-5px 0px 0 0 red;
}
方法四:drop-shadow
CSS3 新增滤镜 filter 中的其中一个滤镜drop-shadow,也可以生成阴影。
.div1{
filter:drop-shadow(-5px 0 0 red);
}
方法五:渐变 linearGradient
.div1 {
background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
}
此外还可以用outline或者滚动条的形式来实现,但是这两种的体验效果或者兼容性都不是太好,不推荐使用。