css3 border怎么就可以画图了

一直没有在意border,众所周知border就是边框,大概就是定义一个宽度,样式,颜色。就可以了,最大的作用可能就是美观了。最近发现,其实还有一个重要的作用--画图.
在谈及这个功能之前,必须要先明确border到底是怎么形成的.

# newDiv{    width:0px;    height:0px;    border-left:50px solid pink;    border-right:50px solid pink;    border-top:50px solid pink;    border-bottom:50px solid transparent;}

形状是 :

要是设置width和height属性的话,即:

border# newDiv{    width:45px;    height:17px;    border-left:50px solid pink;    border-right:50px solid pink;    border-top:50px solid pink;    border-bottom:50px solid transparent;}

形状是:

如大家所见,border并不是一个矩形,而是一个三角形或者梯形.

想要让border显示出来,最少要水平方向和垂直方向各一个方向的属性,即border-top或border-bottom中的一个加上border-left或border-right中的一个

有了这个规则之后,大家可以发挥自己的想象力,划出不同的形状,这里转载一篇使用css样式画出不同形状的文章:
穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

关键字:css3, solid, border, pink

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部