越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

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


- 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;
}
小解释
红色代码:圆角的弧度(可随意更改)
蓝色代码:图片转换成圆角形的时间(就慢动作的时间啦,可更改)

15 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. 额..我的好像没效唉..>.<

    ReplyDelete
  3. Replies
    1. 没有吗?刚刚去了亲的部落格,发现有圆角了啊? ;)

      BII.

      Delete
  4. Replies
    1. 你使用的模板是 BS 模板,当然找不到哦~ ^^
      将代码添加在 [/style] 上面就可以了呢 :D

      *PS: [] 换成 <>

      -replied by BII.

      Delete
  5. Replies
    1. 你根本没有将代码添加去你的部落格,你是要有什么效果 /3//

      - replied by Bii.

      Delete
  6. 謝謝你啊 弄到了 很喜歡:)

    ReplyDelete
  7. 怎麼弄不到的? 是我弄錯甚麼東西了嗎? ><

    ReplyDelete
    Replies
    1. 请问你添加了代码么? 刚刚去了你的部落格,发现你并没有添加到 (?

      -replied by Bii.

      Delete
  8. 請問如果是blogskin,代碼沒有]]>耶
    請問blogskin的話是要尋找什麼代碼呢?

    ReplyDelete
    Replies
    1. 如果是 blogskin 的话,寻找代码 [/style],把以上的代码添加在 [/style] 上面
      把 [] 换成 <> 哦。

      - replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。