저작권 표시: 이 기사의 저작권은 원저자에게 있습니다. 번역은 국내 독자의 참고용입니다
. 기사 요약: 둥근 모서리, 드롭 캡 등 가장 일반적으로 사용되는 CSS 트릭입니다.
8가지 매우 유용한 한 문장 CSS 트릭을 소개한 "8 한 문장 CSS 트릭"의 이전 번역이 있었습니다. 이번 주에는 가장 일반적으로 사용되는 CSS 트릭 중 일부를 소개하는 비슷한 기사를 가져올 것입니다. CSS 트릭. 물론, 나는 모든 디자이너가 개인적으로 선호하는 것이 있을 것이라고 믿습니다. 나는 개인적으로 이 기사에 나오는 몇 가지 요령을 별로 좋아하지 않습니다.
1. 이미지의 둥근 모서리 효과를 사용하지 마세요.
<div id="container">
<b 클래스=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–내용은 여기에 있습니다 –>
<b 클래스=”rbottom">
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{디스플레이: 블록 높이: 1px: 숨김}
.r1{여백: 0 5px}
.r2{여백: 0 3px}
.r3{여백: 0 2px}
.r4{margin: 0 1px; height: 2px}
(많은 사람들이 이 반올림 기법을 선호하지만 저는 개인적으로 별로 좋아하지 않습니다. 모서리가 둥근 사진을 만들 필요는 없지만 이러한 추가 태그는 항상 불필요한 느낌)
2. 스타일 목록
<ol>
<리>
<p>첫 번째 줄입니다</p>
</li>
<리>
<p>두번째 줄입니다</p>
</li>
<리>
<p>그리고 마지막 줄</p>
</li>
</ol>
올 {
글꼴: 기울임꼴 1em Georgia, Times, serif;
색상: #999999;
}
올 피 {
글꼴: 일반 .8em Arial, Helvetica, sans-serif;
색상: #000000;
}
일련번호에 다양한 글꼴을 적용할 수도 있는 효과도 매우 마음에 듭니다.
3. 표 없는 형식
4. 큰따옴표 기법
5. 그라데이션 단어 효과
6. 세로 가운데 정렬
자세한 내용은 원문 참조
10. 드롭 캡
<p class="introduction"> 이 단락에는 "introduction" 클래스가 있습니다. 귀하의 브라우저는 의사 클래스 "첫 글자"를 지원하며, 첫 글자는 첫 글자가 첫 글자입니다. </p>
p.introduction:first-letter {
글꼴 크기: 300%;
글꼴 두께: 굵게;
플로트: 왼쪽;
너비: 1em;
}