How to implement vertical lines in css

Implementation method: 1. Use the border-left or border-right attribute to implement; 2. Use pseudo elements to implement; 3. Use the box-shadow attribute to implement; 4. Use "filter:drop-shadow() "Achieved; 5. Implemented using linearGradient gradient.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to implement vertical lines in css

html:

<p>实现竖线</p>

css:

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

Method 1: Use border-left or border-right

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

Rendering:

Method 2: Use pseudo elements to achieve

Each Tags will have two pseudo-elements, before and after, and we often use these tags to make small icons such as Icon. Here we use pseudo elements, and it will be easy to achieve the desired effect.

.p1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
}

Rendering:

Method 3: Inner/outer shadow

Use inner shadow or outer shadow This effect can also be achieved, but there will be a compatibility issue with the bottom 1px on some Chrome (for example: Chrome/70.0) versions, which is not encountered in other browsers.

/* 内阴影 */
    .p1{
        box-shadow:inset 5px 0px 0 0 red;
    }

/* 外阴影  有些Chrome（比如：Chrome/70.0）版本上会底部1px兼容性问题，显示效果如下图*/
    .p1{
        box-shadow:-5px 0px 0 0 red;
    }

Rendering:

Method 4: drop-shadow

CSS3 new filter filter One of the filters, drop-shadow, can also generate shadows.

.p1{
   filter:drop-shadow(-5px 0 0 red); 
 }

Rendering:

Method Five: Gradient linearGradient

.p1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }

Rendering:

In addition, it can also be implemented in the form of outline or scroll bar, but the experience effect or compatibility of these two are not very good, and they are not recommended.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to implement vertical lines in css. For more information, please follow other related articles on the PHP Chinese website!