-
/*完整代码：使用梯形叠加实现伪圆角效果*/ <!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>查看全部
-
border实现三角原理： width: 100px; height: 100px; border: 100px solid; border-color: red yellow blue green; border梯形原理绘图： .triangle{ width:600px; border:100px solid; border-color:transparent transparent #c00;查看全部
-
border宽度不可使用百分比，受此限制，无法用于百分比布局需要； boder-color属性可继承color，因此可用于一次性优化多个布局； border可以透明，transparent属性，可利用此属性生成三角或者梯形； border-style中的double及dotted可用于创建三条短线样式、圆。 border以及background配合使用，可以定位背景图片至右侧。（backgroud-positon默认相对左上角） background定位的局限 只能相对左上角数值定位，不能相对于右下角 background-position:50px 40px;（background-position默认相对于左上方定位的） 距离左边缘一直50px一直很简单，但是距离右边边缘 借助border定位（background-position定位）background定位的局限 只能相对左上角数值定位，不能相对于右下角 background-position:50px 40px;（background-position默认相对于左上方定位的） 距离左边缘一直50px一直很简单，但是距离右边边缘 借助border定位（background-position定位）查看全部
-
border-style:solid;实线 border-style:dotted;点线（实线圆角效果） border-style:double;双线 border-style:inset;内凹，大眼瞪小眼 border-style:outset;外凸 border-style:groove;沟槽查看全部
-
border-width不支持百分比值：语义和使用场景决定，边框不会因设备大小而变化 类似：outline,box-shadow,text-shadow,... border-width支持关键字thin，medium,thick,默认medium：3px， 用的最多是thin：1px，因为border-style:double至少3px才有效果查看全部
-
透明border突破可视区域的限制。查看全部
-
border兼容性好的实现复选框查看全部
-
画三角的 mark一下查看全部
-
#checkbox2 { cursor:pointer; width:20px; height:20px; border:2px solid transparent; box-shadow:inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px; background-color:#fff; background-clip:content-box; color:#d0d0d5; }查看全部
-
借助border实现图片距离右下角定位查看全部
-
border实现三角原理： width: 100px; height: 100px; border: 100px solid; border-color: red yellow blue green; 宽高设置为0，颜色设置为透明就可以实现想要的效果。查看全部
-
（兼容IE78）利用border-style：double实现三道杠（padding也可以，但不兼容IE7/8）查看全部
-
border实现图片右侧案例： border-right: 50px solid transparent; background-position: 100% 40px;查看全部
-
bckground-position图片默认相对左上方定位的！查看全部
-
border-style：dotted浏览器差异查看全部
举报
0/150
提交
取消