CSS图书馆 » 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 - 回复

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

  2. kongkx - 回复

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

  3. Win7en乐园 - 回复

    相当的不错,借鉴一下


{ 发表评论 }