首先，通过CSS的borderradius属性，赋予图片圆润边缘只需在img标签上添加如下CSS代码`css `其次，SVG矢量图形的灵活度也能派上用场利用SVG的圆形路径，可以定制精确的圆形遮罩，代码示例如下`html `如果你更喜欢动态和交互性，Canvas HTML5工具也能胜任通过在Canvas上绘制圆形路径并置入图片，能。

把html中按钮设置为圆形很简单，只需要将按钮的borderradius属性设置50%，同时将宽和高设置相同即可并去除边框线具体实现代码如下lt！doctype html lthtml lthead ltmeta charset=quotUTF8quot lttitleDocumentlttitle lthead ltbody ltinput type=quotbuttonquot value=quot按钮quot style=quotwidth 50px。

对应不同的部分，我们将其分解为5部分的html代码并为其添加class，1卡牌背景2卡牌颜色由于布局相同只有颜色不同，故将颜色抽出成为单独的类3上下角标数字4白色椭圆背景5大数字 以下均采用代码和效果图对比的方式展示效果 布好局之后，为其添加样式首先新建css样式表，并将其关联至html。

1首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签2然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性borderradius属性定义圆角效果其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大3。