-
border实现等高布局，局限：不支持百分比宽度查看全部
-
增加可视渲染区域 透明border突破可视区域的限制查看全部
-
利用box-shadow增加响应区域大小查看全部
-
/*完整代码：使用梯形叠加实现伪圆角效果*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:600px; height:200px; background:red; } .border{ width:580px;height:50px; border:10px solid; } .top{ border-color:transparent transparent red; } .bottom{ border-color:red transparent transparent; } </style> </head> <body> <div class="top border"></div> <div class="box"></div> <div class="bottom border"></div> </body> </html>查看全部
-
实际应用场景查看全部
-
实现三角效果查看全部
-
width:0 height：0 的效果查看全部
-
width:0 height：0 的效果查看全部
-
border-color的特性查看全部
-
利用border-right透明实现 background居右定位查看全部
-
background-position定位，默认相对于左上方定位查看全部
-
利用border：color的特性实现hover与图形变色查看全部
-
巧妙实现三道杠查看全部
-
border-style:solid;实线 border-style:dotted;点线（实线圆角效果） border-style:double;双线 border-style:inset;内凹，大眼瞪小眼 border-style:outset;外凸 border-style:groove;沟槽查看全部
-
border:double查看全部
举报
0/150
提交
取消