W3.CSS Round (圓)

2020-11-30 14:03 更新

w3-round-size 類添加圓角到任何 HTML 元素：

類 定義
w3-round
圓角（邊界半徑）4px
w3-round-small
圓角（邊界半徑）2px
w3-round-medium
圓角（邊界半徑）4px
w3-round-large
圓角（邊界半徑）8px
w3-round-xlarge
圓角（邊界半徑）16px
w3-round-xxlarge 圓角（邊界半徑）32px

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Circle Class (圓類)

w3-circle 類顯示圓內(nèi)的內(nèi)容。

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

圓內(nèi)的文本

實(shí)例

<div class="w3-padding-32 w3-red w3-circle w3-center">

  <h1>w3-circle 類</h1>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

圓中圓

實(shí)例

<div class="w3-padding-32 w3-green w3-circle">

  <img src="img_car.jpg" class="w3-circle" style="width:75%">

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例

<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">你好<br>W3CSchool!</p>

  </div>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號