教程 | 将图片的边变成圆角

- Tutorial requested by Michelle -

教程 ① 图片直接呈现圆角状态

1. 设计 → 修改 HTML

2. 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 的上面添加以下代码：

img{

-moz-border-radius: 30px;

border-radius: 30px;
}

如果、如果，你的 ]]></b:skin> 上面已经有了 img{ ，你只要直接把以下代码加进去 {...} 之间就好了：

-moz-border-radius: 30px;

border-radius: 30px;

 4. 加了代码之后，按 preview 看看效果有没有出来，保存 即可。

教程 ② 鼠标经过时，图片呈圆角状态

* 这个教程就是说，当 cursor 经过图片的时候，你的图片会变成圆角形状了。

1. 设计 → 修改 HTML

2. 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 的上面添加以下代码：

img:hover{

-webkit-transition-duration: 0.5s;

-moz-border-radius: 30px;

border-radius: 30px;

}

小解释
红色代码：圆角的弧度（可随意更改）
蓝色代码：图片转换成圆角形的时间（就慢动作的时间啦，可更改）