이 시리즈에서는 몇 가지 흥미로운 CSS 주제를 논의합니다. 실용성은 제쳐두고 문제 해결을 위한 아이디어를 넓히기 위해 고안되었습니다. 또한 쉽게 간과할 수 있는 몇 가지 CSS 세부 사항도 포함합니다.
문제 해결 시 호환성은 고려되지 않습니다. 질문이 거칠고 제약이 없습니다. 문제 해결에서 익숙하지 않다고 생각되는 CSS 속성이 있으면 빨리 공부하세요. .
계속 업데이트하고, 계속 업데이트하고, 계속 업데이트하고, 중요한 것을 세 번 말하세요.
더 많은 솔루션을 얻기 위해 Github에 요약하고 블로그에 게시하세요.
단일 태그가 div
:
<div></div>
은 다음 일반 CSS
으로 정의됩니다.
div{ position:relative; width:200px; height:60px; background:#ddd; }
이것이 가장 생각하기 쉽고 쉬운 것이어야 합니다
div{ border-left:5px solid deeppink; }
은 before
및 after
의사 요소를 세어 보면 실제로 세 개의 레이블이 있습니다. 이는 또한 많은 단일 레이블 그림의 기초이기도 합니다. 의사 요소.
div::after{ content:""; width:5px; height:60px; position:absolute; top:0; left:0; background:deeppink; }
박스 섀도우 box-shadow
대부분의 사람들은 생성된 그림자만 사용합니다. 실제로 그림자는 여러 개의 그림자를 가질 수 있으며, 이를 위해서는 box-shaodw
의 각 매개변수의 특정 기능을 이해해야 합니다. box-shaodw
을 사용하여 문제를 해결하세요
div{ box-shadow:-5px 0px 0 0 deeppink; }
상자 그림자에는 내부 그림자를 설정하는 데 사용되는 매개변수 inset
도 있습니다.
div{ box-shadow:inset 5px 0px 0 0 deeppink; }
drop-shadow
은 CSS3 filter
의 새로운 필터 중 하나입니다. 그림자를 생성할 수도 있지만 상자 그림자보다 하나 적은 3개의 숫자 매개변수만 있습니다.
div{ filter:drop-shadow(-5px 0 0 deeppink); }
CSS3 그라디언트를 유연하게 사용하면 예상치 못한 그래픽이 많이 생성될 수 있습니다. CSS3 그라디언트는 선형 그라디언트와 방사형 그라디언트를 사용하며 쉽게 해결할 수 있습니다.
div{ background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px); }
드물게 사용됩니다. 윤곽선은 요소 주위에 그려지는 선으로 테두리 가장자리 외부에 위치하며 요소를 강조할 수 있습니다. 이 방법은 차선책으로 간주됩니다.
div{ height:50px; outline:5px solid deeppink; } div{ position:absolute; content:""; top:-5px; bottom:-5px; right:-5px; left:0; background:#ddd; }
이 방법은 Little Match의 Blue Ideal에서 제공하며 스크롤바 스타일을 변경하여 구현됩니다.
div{ width:205px; background:deeppink; overflow-y:scroll; } div::-webkit-scrollbar{ width: 200px; background-color:#ddd; }
실용성을 떠나 이 스타일만 흉내낸다면 이 방법이 정말 눈길을 사로잡습니다.
위에 생각나는 8가지 방법이 있습니다. 제가 생각하지 못한 다른 방법도 있을 수 있으니 댓글을 눌러주세요. 구체적인 8가지 구현을 보려면:
단일 라벨 왼쪽에 세로 막대 코드펜 구현
모든 질문은 내 Github에 요약되어 있으며 더 많은 솔루션을 얻기 위해 블로그에 게시되었습니다.
아직 궁금한 점이나 제안사항이 있으면 더 많은 의견을 보내주시면 됩니다. 글의 내용이 제한되어 있고 잘못된 내용이 있는 경우. 기사로 알려주세요.