最适合网络开发者的网站
W3CSS。初学者课程

尿素

W3.CSS 圆形课程


w3-圆形-小

w3 回合

w3-圆形-大

w3-圆形-xlarge

w3-圆形-xxlarge

w3-回合-尺寸 类为任意 HTML 元素添加圆角:

班级 定义
w3 回合 元素圆角(边框半径)4px
w3-圆形-小 元素圆角(边框半径)2px
w3-圆形中号 元素圆角(边框半径)4px
w3-圆形-大 元素圆角(边框半径)8px
w3-圆形-xlarge 元素圆角(边框半径)16px
w3-圆形-xxlarge 元素圆角(边框半径)32px

例子

<div class="w3-round w3-teal">w3 回合</div>
亲自尝试 »

Circle 类

w3-圆圈 类在圆圈内显示内容。


圆圈内的图像

圆圈内的图像

例子

<img class="w3-circle" src="img_car.jpg" alt="车">
亲自尝试 »

圆圈内的文字

圆圈内的文字

例子

<div class="w3-padding-32 w3-red w3-circle w3-center">
<h1>w3-circle 类</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">你好<br> W3.CSS!</p>
  </div>
</div>
亲自尝试 »