corners边框_CSS3 border-radius简单实现涂鸦风格边框

CSS3 border-radius简单实现涂鸦风格边框

四月 20, 2013

评论 (3)

Sponsor

今天向大家介绍一下用CSS3 border-radius属性来实现涂鸦风格边框，如果你需要制作动漫风格的个人网站或博客，或许你会用到这个样式。实现方法很十分简单，至于边框颜色可以根据自己喜欢的颜色来配色，下面一起来看看这个涂鸦风格的边框是如何实现的。

在线演试地址：查看DEMO

HTML代码：

CSS3简单实现涂鸦风格边框 真的很好玩哦！

CSS样式代码：

div {

border:solid 5px #593207;

width:200px;

margin:25px auto;

border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

padding:10px;

}

这里的border-radius使用了斜杠来设置二组圆角值，第一组值表示水平半径，第二组值表示垂直半径。

如果想了解更多有关CSS3 border-radius圆角属性，请参考这里。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：结交更多有才华的设计师？请加入UI设计QQ群，与50000名设计师交流设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

pandada-12 -

2013 年 12 月 18 日 下午 1:06

想自己做一个网页，怎么把这个代码弄到dreamweaver里面啊？新手求教~~

kongkx -

2013 年 04 月 20 日 下午 5:12

我想加上这句，会容易懂一些border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html

Win7en乐园 -

2013 年 04 月 20 日 下午 12:55

相当的不错，借鉴一下

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站