HTML & CSS » CSS3 border-radius简单实现涂鸦风格边框

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

发表于: HTML & CSS. 评论 (3)
Sponsor

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

css3-border-radius-涂鸦风格边框

在线演试地址：查看DEMO

HTML代码：

<body>
<div class="box">CSS3简单实现涂鸦风格边框 真的很好玩哦！</div>
</body>

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设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论3 Responses to “CSS3 border-radius简单实现涂鸦风格边框”

  1. pandada-12 - 回复
    2013 年 12 月 18 日 下午 1:06

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

  2. kongkx - 回复
    2013 年 04 月 20 日 下午 5:12

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

  3. Win7en乐园 - 回复
    2013 年 04 月 20 日 下午 12:55

    相当的不错，借鉴一下


{ 发表评论 }