css3 如直角(圆角)梯形
没明白你的意思 你这个只有border-bottom显示了 其它的没有显示 光是显示border-bottom 无法给给你说的上边加圆角吧?
上下左右4条边，最关键的一点：每两条边的相交处是斜线的相交的。
如果不渲染成斜线，那么写浏览器内核解析css的程序员要纠结了：上边该压着左边线还是右边线，谁压谁都不合理啊，最简单的是弄成斜线等分，还不必去写判断谁该压着谁的程序代码。
于是，就给用边框创造梯形、三角形留下了空间，其他三条边颜色设置为透明或none，剩下的就是梯形或三角了，至于直角梯形，第6个div是，观察第4个div的 none 起了什么作用，再看div6，相信你就明白了。上图的代码：
123456div{ float: left;margin: 10px; border-top: 30px red solid; border-bottom: 30px blue solid; border-left: 30px yellow solid; border-right: 30px green solid;}#div1{width: 0;height: 0;}#div2{width: 30px;height: 0;}#div3{width: 30px;height: 30px;}#div4{ width: 30px; border-top: none;}#div5{ border-top: transparent 30px solid; border-bottom: 30px blue solid; border-left: transparent 30px solid; border-right: transparent 30px solid;}#div6{ width: 50px; height: 0; border-top: none; border-bottom: 40px blue solid; border-left: transparent 30px solid; border-right: none;}
.div{
height: 80px;
width: 250px;
background-color: #FFC800;
margin: 50px;
border-radius: 15px;
transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);
}border-radius：12px
圆角 为零则为直角
梯形 [元素变形]
transform：
perspective [透视距离]
rotateX [横向.x轴旋转]
rotateY [竖向.Y轴旋转]
translateZ [Z轴移动,可以理解为放大和缩小]
了解这些基本的变形用法,就可以实现 【梯形】,
但复杂一些就没办法了，要用到SVG或Canvas，
柴紫六味： 它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到html页面上的任何元素上去.web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如activex 控件...
古交市17310945182： 如何用css3+html5做一个直角梯形 - ？
柴紫六味： height:0; width:100px; border-bottom:60px solid #000; border-left:0px solid transparent; border-right:50px solid transparent; 直接用边框做
古交市17310945182： css3做圆角右边是圆角左边是直角 - ？
柴紫六味： 问题:css3做圆角右边是圆角左边是直角 解答:注意css改动这里,nav ul li{ float:left; margin:0 20px; background-color:#999;border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; font-size:30px;} 理解:border-radius属性1)border-...
古交市17310945182： 怎样用css实现圆角矩形?？
柴紫六味： 貌似只有CSS3才能够实现圆角矩形吧.你可以在css中分成3段,前后两段用图片做背景成为圆角,中间用矩形.
古交市17310945182： 如何用CSS实现圆角矩形?？
柴紫六味： <style type=＂text/css＂> .circle { background-color:#f00;/* 背景颜色 */ width: 600px; /* div的宽、高分别为600px、300px*/ height: 300px; border-radius: 30px; /* 四角半径 */ color:#fff; } </style> <div class=＂circle＂> </div> 不过提前说明哦,只有在火狐浏览器上才可以看到圆角矩形的!
古交市17310945182： CSS圆角矩形设置 - ？
柴紫六味： CSS圆角矩形可以使用 Border-radius 属性即可实现.Border-radius 属性相关定义功能及其案例:1. 对浏览器的支持:IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性.2. 定义和用法:border-radius 属性是一个简写属...
古交市17310945182： 如何用div+css做圆角？
柴紫六味： <!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂><html xmlns=＂ http://www.w3.org/1999/xhtml＂><head><meta http-equiv=＂Content-Type＂ content=＂text/...
古交市17310945182： 怎么用css做圆角矩形?？
柴紫六味： div.bg{background:#ffc20e;width:50%} b{display:block;} /*将所有B标签转成块级元素*/ div b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;} /*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px,溢出部份隐...
古交市17310945182： css圆角矩形的制作？
柴紫六味： 就我所知有:设置背景图片还有就是重叠(就是把多个正方形的四个角按一定弧度堆出个圆角来,缺少:明明只需要一个div的,结果要重叠出圆角可能就需要多写十来个呢.)还有就是css3.0 该手册中有圆角参数.但是IE浏览器支持它的很少.其它浏览器最新版本基本都支持. 可以下载一个css3.0手册来看看
古交市17310945182： 如何用css3 transform写出梯形 - ？
柴紫六味： IE10以下不支持css3 transform属性.ie的话是加上-ms-前缀,或者直接用标准模式.比如: -ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg); 或者:transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg); 都可以 里面的相关属性自己查一下transform的说明吧
