> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 수직선을 구현하는 방법

CSS에서 수직선을 구현하는 방법

青灯夜游
풀어 주다: 2023-01-07 11:42:18
원래의
17301명이 탐색했습니다.

구현 방법: 1. border-left 또는 border-right 속성을 사용하여 구현합니다. 2. 의사 요소를 사용하여 구현합니다. 3. box-shadow 속성을 사용하여 구현합니다. "를 구현합니다. 5, 선형 그래디언트 그래디언트를 사용하여 구현되었습니다.

CSS에서 수직선을 구현하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Css 수직선 구현 방법

html:

<p>实现竖线</p>
로그인 후 복사

css:

p{
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }
로그인 후 복사

방법 1: border-left 또는 border-right 사용

.p1 {
	border-left: 5px solid red;
	border-right: 5px solid red;
}
로그인 후 복사

렌더링:

CSS에서 수직선을 구현하는 방법

방법 2: 의사 요소 사용 초

각 라벨에는 전후에 두 개의 의사 요소가 있으며, 우리는 종종 이러한 유형의 라벨을 사용하여 아이콘과 같은 작은 아이콘을 만듭니다. 여기서는 의사 요소를 사용하며 원하는 효과를 쉽게 얻을 수 있습니다.

.p1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
}
로그인 후 복사

렌더링:

CSS에서 수직선을 구현하는 방법

방법 3: 내부/외부 그림자

내부 그림자 또는 외부 그림자를 사용하여 이 효과를 얻을 수도 있지만 일부 Chrome(예: Chrome/70.0) 버전에서는 하단이 1px이어야 합니다. 다른 브라우저에서는 호환성 문제가 발생하지 않았습니다.

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

/* 外阴影  有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,显示效果如下图*/
    .p1{
        box-shadow:-5px 0px 0 0 red;
    }
로그인 후 복사

렌더링:

CSS에서 수직선을 구현하는 방법

방법 4: drop-shadow

CSS3 새 필터 필터의 필터 중 하나인 Drop-shadow도 그림자를 생성할 수 있습니다.

.p1{
   filter:drop-shadow(-5px 0 0 red); 
 }
로그인 후 복사

Rendering:

CSS에서 수직선을 구현하는 방법

Method 5: Gradient LinearGradient

.p1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }
로그인 후 복사

Rendering:

CSS에서 수직선을 구현하는 방법

또한 개요나 스크롤 막대 형태로도 얻을 수 있지만 이러한 경험 효과는 2개 또는 호환성이 별로 좋지 않아 권장하지 않습니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS에서 수직선을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿