CSS 왼쪽 세로 막대의 구현 방법 코드

문제 해결 시 호환성은 고려되지 않습니다. 질문이 거칠고 제약이 없습니다. 문제 해결에서 익숙하지 않다고 생각되는 CSS 속성이 있으면 빨리 공부하세요. .

계속 업데이트하고, 계속 업데이트하고, 계속 업데이트하고, 중요한 것을 세 번 말하세요.

질문 1. 하나의 레이블만 사용하여 다음 그래픽을 구현할 수 있는 방법은 몇 가지입니까?

단일 태그가 p:

<p></p>

라고 가정해 보겠습니다. 일반 CSS:

p{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

방법 1: 테두리

이것이 가장 생각하기 쉽고 쉬운 것입니다

p{
    border-left:5px solid deeppink;
}

방법 2: 의사 요소 사용

및 before 의사 요소를 계산하는 after 태그는 실제로 3개의 태그로 계산됩니다. 이는 또한 많은 단일 라벨 그림의 기초이기도 합니다. 이 질문에서는 의사-요소를 사용하여 쉽게 완성할 수 있습니다. 강요.

p::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

방법 3: 외부 상자 그림자

상자 그림자 box-shadow 대부분의 사람들은 생성된 그림자만 사용합니다. 여러 개의 그림자가 있으며 그림자를 흐리게 처리해야 합니다. 이를 위해서는 box-shaodw의 각 매개변수의 특정 기능을 이해해야 합니다. box-shaodw을 사용하여 문제 해결

p{
    box-shadow:-5px 0px 0 0 deeppink;
}

방법 4: 내부 상자 그림자

상자 그림자에도 매개변수가 있습니다inset 내부 그림자 설정도 수행할 수 있습니다:

p{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

방법 5: drop-shadow

drop-shadow는 CSS3의 새로운 필터입니다. filter 의 필터 중 하나도 그림자를 생성할 수 있지만 상자 그림자보다 하나 적은 숫자 매개변수가 3개만 있습니다.

p{
    filter:drop-shadow(-5px 0 0 deeppink);
}

방법 6: 그라데이션 선형 그라데이션

CSS3 그라데이션을 유연하게 사용하면 예상치 못한 수많은 CSS3 그라데이션을 선형으로 나눌 수 있습니다. 그라디언트와 방사형 그라디언트를 사용하는 경우 이 질문은 쉽게 해결할 수 있는 선형 그라디언트를 사용합니다.

p{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

방법 7: 윤곽선

이것은 덜 사용됩니다. 윤곽선은 요소를 강조하기 위해 테두리 가장자리 바로 바깥에 요소 주위에 그려진 선입니다. 이 방법은 차선책으로 간주됩니다.

p{
    height:50px;
    outline:5px solid deeppink;
}
p::after{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

방법 8, 스크롤바

이 방법은 Little Match의 파란색 이상에서 제공하는 것으로 스크롤바를 변경하여 구현합니다. 스타일:

p{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
p::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

실용성은 제쳐두고, 이 스타일을 시뮬레이션해 보면 이 방법이 정말 눈길을 끕니다.

위에 생각나는 8가지 방법이 있는데, 예상치 못한 방법도 있을 수 있으니 댓글로 제안해 주셨으면 좋겠습니다. 구체적인 8가지 구현을 보려면 여기를 클릭하십시오.

단일 라벨의 왼쪽에 있는 수직 막대의 코드펜 구현

위 내용은 CSS 왼쪽 세로 막대의 구현 방법 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!