codecamp

W3.CSS Round (圆)

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

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例

Circle Class (圆类)

w3-circle 类显示圆内的内容。

实例

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

尝试一下 »
点击“尝试一下”按钮查看在线实例

圆内的文本

实例

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

<h1>w3-circle 类</h1>

</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

圆中圆

实例

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

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

</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<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>

尝试一下 »
点击“尝试一下”按钮查看在线实例

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }