w3.css

라운드 클래스

w3-round-size 클래스는 모든 HTML 요소에 둥근 모서리를 추가한다.

w3-round-small

w3-round

w3-round-large

w3-round-xlarge

w3-round-xxlarge

w3 라운드 크기 클래스는 HTML 요소에 둥근 모서리를 추가한다.

Class	Defines
w3-round	Element rounded (border-radius) 4px
w3-round-small	Element rounded (border-radius) 2px
w3-round-medium	Element rounded (border-radius) 4px
w3-round-large	Element rounded (border-radius) 8px
w3-round-xlarge	Element rounded (border-radius) 16px
w3-round-xxlarge	Element rounded (border-radius) 32px

예제

<div class="w3-round w3-teal">w3-round</div>

서클 클래스

w3-circle 클래스는 원 안에 콘텐츠를 표시한다.

원 안의 이미지

예제

<img class="w3-circle" src="img_car.jpg" alt="Car">

원 안의 텍스트

예제

<div class="w3-padding-32 w3-red w3-circle w3-center">
  <h1>The w3-circle Class</h1>
</div>

원 안의 원

안녕하세요
W3.CSS입니다!

예제 1

<div class="w3-padding-32 w3-green w3-circle">
  <img src="img_car.jpg" class="w3-circle" style="width:75%">
</div>

예제 2

<div class="w3-padding-32 w3-green w3-circle">
  <div class="w3-padding-32 w3-red w3-circle w3-center" style="width:55%">
    <p class="w3-xlarge">Hello<br>W3.CSS!</p>
  </div>
</div>

참고

W3C School - W3.CSS Round Classes

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기