css竖排显示技巧(css魔法之左边竖条的多种实现方法)
类别:Web前端 浏览量:721
时间:2022-04-01 01:21:30 css竖排显示技巧
css魔法之左边竖条的多种实现方法问题描述:在只使用一个标签的情况下实现左边竖线
通用标签与样式如下:
html:
<li class="li1">实现左边竖线</li>
css:
.li1 { width: 200px; height: 50px; line-height:50px; text-align: center; background: #ccc; position: relative; }
方法一:使用border
.li1 { border-left: 5px solid red;}
方法二:使用伪元素来实现
每个标签都会有before及after两个伪元素,并且我们也经常用这类标签做一些Icon之类的小图标。这里我们使用伪元素,也会很容易来实现想要的效果。
.li1::before { content: ""; width: 5px; height:50px; position: absolute; top: 0; left: 0; background: red; }
方法三:内/外阴影
使用内阴影或者外阴影也能实现此效果,不过在有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,其他浏览器没遇到。
/* 内阴影 */ .li1{ box-shadow:inset 5px 0px 0 0 red; } /* 外阴影 有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,显示效果如下图*/ .li1{ box-shadow:-5px 0px 0 0 red; }
在Chrome/70.0下显示效果
方法四:drop-shadow
CSS3 新增滤镜 filter 中的其中一个滤镜drop-shadow,也可以生成阴影。
.li1{ filter:drop-shadow(-5px 0 0 red); }
方法五:渐变 linearGradient
.li1 { background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px); }
此外还可以用outline或者滚动条的形式来实现,但是这两种的体验效果或者兼容性都不是太好,不推荐使用。
总结
以上所述是小编给大家介绍的css魔法之左边竖条的多种实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣
- 纯css和js有什么区别(CSS语法与JSON、JS对象区别比较)
- css中rem单位
- css 圆角切换(CSS实现反方向圆角的示例代码)
- css动画的性能(你所不知道的 CSS 动画技巧与细节)
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- js实现CSS格式化和压缩
- css3动画效果图(CSS3 三维变形实现立体方块特效源码)
- css设计文本框及按钮样式(CSS仿网易首页的头部菜单栏按钮和三角形制作方法)
- css如何设置简写代码(10个CSS简写/优化技巧整理)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)
- css高级使用技巧(全面解析CSS Media媒体查询使用操作推荐)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- css中ul li的用法
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- css垂直居中
- 今日菜价 芥兰涨幅最高 1.33 ,花菜降幅最高 3.10(今日菜价芥兰涨幅最高)
- 今日菜价 椰菜涨幅最高 3.25 ,水空心菜降幅最高 2.58(今日菜价椰菜涨幅最高)
- 今日菜价 红三鱼涨幅最高 4.41 ,黄鳝降幅最高 5.06(红三鱼涨幅最高)
- 今日菜价 西生菜涨幅最高 6.19 ,生菜降幅最高 5.38(西生菜涨幅最高)
- 今日菜价 青豆角涨幅最高 0.70 ,菜心降幅最高 5.55(青豆角涨幅最高)
- 农村植物,龙芽草若长在您家路旁,请珍惜,它对抗癌有特效(龙芽草若长在您家路旁)