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

版权声明

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