CSS만을 사용하여 "툴팁 꼬리"를 만든다는 개념이 매력적입니다. 이 효과를 얻는 방법은 다음과 같습니다.
첫 번째 예에서는 영리한 테두리 조작을 사용하여 "툴팁 꼬리" 효과를 만듭니다.
HTML:
<div>Cool Trick: <div class="tooltiptail"></div> </div> <br> <div>How do I get this effect with only CSS? <div class="anothertail"></div> </div>
CSS:
.tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; }
"도구 설명 꼬리" 끝에 치수와 그림자를 추가하려면 상자 그림자를 활용할 수 있습니다.
#tailShadow { position: absolute; bottom: -8px; left: 28px; width: 0; height: 0; border: solid 2px #fff; box-shadow: 0 0 10px 1px #555; }
다음 스니펫은 box-shadow에 대한 브라우저 간 호환성을 보장합니다. 효과:
#tailShadow { position: absolute; bottom: -8px; left: 28px; width: 0; height: 0; border: solid 2px #fff; -moz-box-shadow: 0 0 10px 1px #555; -webkit-box-shadow: 0 0 10px 1px #555; box-shadow: 0 0 10px 1px #555; }
이러한 기술을 사용하면 CSS에서 웹 요소의 시각적 매력과 기능을 향상시키는 사용자 정의 "툴팁 꼬리"를 만들 수 있습니다.
위 내용은 Pure CSS로 '도구 설명 꼬리' 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!