몇 가지 흥미로운 CSS 주제에 대해 이야기해 보겠습니다. (1)-왼쪽에 수직 막대를 구현하는 방법

이 시리즈에서는 몇 가지 흥미로운 CSS 주제를 논의합니다. 실용성은 제쳐두고 문제 해결을 위한 아이디어를 넓히기 위해 고안되었습니다. 또한 쉽게 간과할 수 있는 몇 가지 CSS 세부 사항도 포함합니다.

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

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

더 많은 솔루션을 얻기 위해 Github에 요약하고 블로그에 게시하세요.

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

단일 태그가 div:

이라고 가정해 보겠습니다.

<div></div>

은 다음 일반 CSS으로 정의됩니다.

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

방법 1: 테두리

이것이 가장 생각하기 쉽고 쉬운 것이어야 합니다

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

방법 2: 의사 요소 사용

은 before 및 after 의사 요소를 세어 보면 실제로 세 개의 레이블이 있습니다. 이는 또한 많은 단일 레이블 그림의 기초이기도 합니다. 의사 요소.

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

방법 3: 외부 상자 그림자

박스 섀도우 box-shadow 대부분의 사람들은 생성된 그림자만 사용합니다. 실제로 그림자는 여러 개의 그림자를 가질 수 있으며, 이를 위해서는 box-shaodw의 각 매개변수의 특정 기능을 이해해야 합니다. box-shaodw을 사용하여 문제를 해결하세요

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

방법 4: 내부 상자 그림자

상자 그림자에는 내부 그림자를 설정하는 데 사용되는 매개변수 inset도 있습니다.

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

방법 5: 그림자

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

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

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

CSS3 그라디언트를 유연하게 사용하면 예상치 못한 그래픽이 많이 생성될 수 있습니다. CSS3 그라디언트는 선형 그라디언트와 방사형 그라디언트를 사용하며 쉽게 해결할 수 있습니다.

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

방법 7: 개요 개요

드물게 사용됩니다. 윤곽선은 요소 주위에 그려지는 선으로 테두리 가장자리 외부에 위치하며 요소를 강조할 수 있습니다. 이 방법은 차선책으로 간주됩니다.

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

방법 8, 스크롤바

이 방법은 Little Match의 Blue Ideal에서 제공하며 스크롤바 스타일을 변경하여 구현됩니다.

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

실용성을 떠나 이 스타일만 흉내낸다면 이 방법이 정말 눈길을 사로잡습니다.

　

위에 생각나는 8가지 방법이 있습니다. 제가 생각하지 못한 다른 방법도 있을 수 있으니 댓글을 눌러주세요. 구체적인 8가지 구현을 보려면:

단일 라벨 왼쪽에 세로 막대 코드펜 구현

모든 질문은 내 Github에 요약되어 있으며 더 많은 솔루션을 얻기 위해 블로그에 게시되었습니다.

아직 궁금한 점이나 제안사항이 있으면 더 많은 의견을 보내주시면 됩니다. 글의 내용이 제한되어 있고 잘못된 내용이 있는 경우. 기사로 알려주세요.