转载地址: http://www.shejidaren.com/css3-border-radius%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0%E6%B6%82%E9%B8%A6%E9%A3%8E%E6%A0%BC%E8%BE%B9%E6%A1%86.html
今天向大家介绍一下用CSS3 border-radius属性来实现涂鸦风格边框，如果你需要制作动漫风格的个人网站或博客，或许你会用到这个样式。实现方法很十分简单，至于边框颜色可以根据自己喜欢的颜色来配色，下面一起来看看这个涂鸦风格的边框是如何实现的。
在线演试地址：查看DEMO
HTML代码：
<body> <div class="box">CSS3简单实现涂鸦风格边框 真的很好玩哦！</div> </body>
CSS样式代码：
<body>
div {
border:solid 5px #593207;
width:200px;
margin:25px auto;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
padding:10px;
}
</body>
这里的border-radius使用了斜杠来设置二组圆角值，第一组值表示水平半径，第二组值表示垂直半径。
如果想了解更多有关CSS3 border-radius圆角属性，请参考这里。
扫一扫
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
