首先，通過(guò)CSS的borderradius屬性，賦予圖片圓潤(rùn)邊緣只需在img標(biāo)簽上添加如下CSS代碼`css `其次，SVG矢量圖形的靈活度也能派上用場(chǎng)利用SVG的圓形路徑，可以定制精確的圓形遮罩，代碼示例如下`html `如果你更喜歡動(dòng)態(tài)和交互性，Canvas HTML5工具也能勝任通過(guò)在Canvas上繪制圓形路徑并置入圖片，能。

把html中按鈕設(shè)置為圓形很簡(jiǎn)單，只需要將按鈕的borderradius屬性設(shè)置50%，同時(shí)將寬和高設(shè)置相同即可并去除邊框線具體實(shí)現(xiàn)代碼如下lt！doctype html lthtml lthead ltmeta charset=quotUTF8quot lttitleDocumentlttitle lthead ltbody ltinput type=quotbuttonquot value=quot按鈕quot style=quotwidth 50px。

對(duì)應(yīng)不同的部分，我們將其分解為5部分的html代碼并為其添加class，1卡牌背景2卡牌顏色由于布局相同只有顏色不同，故將顏色抽出成為單獨(dú)的類(lèi)3上下角標(biāo)數(shù)字4白色橢圓背景5大數(shù)字 以下均采用代碼和效果圖對(duì)比的方式展示效果 布好局之后，為其添加樣式首先新建css樣式表，并將其關(guān)聯(lián)至html。

1首先打開(kāi)sublime text編輯器，新建一個(gè)html文件，里面寫(xiě)入一個(gè)p標(biāo)簽2然后設(shè)置p標(biāo)簽的樣式，這里先設(shè)置一個(gè)邊框，然后設(shè)置圓角邊框，主要使用CSS3屬性borderradius屬性定義圓角效果其中的數(shù)值為參數(shù)length是浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值，這里圓角的值越大，圓角的弧度也越大3。