css魔法——左边竖条的实现方法

Lemon_95 发布于2019-08-29 18:36 / 1843人阅读

摘要：问题描述在只使用一个标签的情况下实现左边竖线通用标签与样式如下实现左边竖线方法一使用方法二使用伪元素来实现每个标签都会有及两个伪元素，并且我们也经常用这类标签做一些之类的小图标。

问题描述：在只使用一个标签的情况下实现左边竖线

通用标签与样式如下：
html:

实现左边竖线

css:

 .div1 {
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }

方法一：使用border

.div1 { border-left: 5px solid red;}

方法二：使用伪元素来实现

每个标签都会有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;
    }

在Chrome/70.0下显示效果

方法四：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或者滚动条的形式来实现，但是这两种的体验效果或者兼容性都不是太好，不推荐使用。

GPU云服务器云服务器顶级域名左边的部分创造与魔法云鸟便宜的服务器创造与魔法所有服务器的云鸟在哪 JS轻松实现CSS设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114440.html

[Leetcode] Largest Rectangle (in Histogram) 最大矩形

摘要：以此类推，如果一直到栈为空时，说明刚出来的竖条之前的所有竖条都比它自己高，不然不可能栈为空，那我们以左边全部的宽度作为长方形的宽度。 Largest Rectangle in Histogram Given n non-negative integers representing the histograms bar height where the width of each bar...

邹强 2019-08-14 12:24 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS魔法堂：不得不说的Containing Block

摘要：前言魔法堂重新认识和中提到在没有兄弟盒子时，的左右边框会与所属的的左右相接触。对于的元素若不存在的为的父，其为。正常情况若子尺寸尺寸，则子溢出溢出后的显示效果由属性值决定。异常情况下当时，若子的尺寸大于的尺寸而城撑大。前言《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》中提到在没有floated兄弟盒子时，line box的左右边...

opengps 2019-08-30 12:53 评论0 收藏0
前端每日实战：42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画

摘要：可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中包含个子元素居中显示定义均衡器的样式定义均衡器竖条的动画效果最后，设置各竖条依次动画大功告成 showImg(https://segmentfault.com/img/bVbfmKG?w=400&h=304); 效果预览按下右侧的点击预览按钮可以在...

wuaiqiu 2019-08-29 15:35 评论0 收藏0