-
虚线边框比较细查看全部
-
很可爱查看全部
-
border实现等高布局 .box{ border-left；300px solid #222; } .left{ width；300px; margin-left:-300px; float:left; } <div class="box"> <nav class="left"> <h3>导航1</h3> </nav> <section> <div class="module">模块1</div。 </section> </div> 局限：不支持百分比宽度查看全部
-
border的透明边框，始于IE7,足够兼容 优雅的增加响应区域大小：(边框使用盒阴影，原先border变透明用来增加点击区域现在复选框点击区域大小为20px*20px) .checkbox{ 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; } 增加可视渲染区域：drop-shadow可以给png图标赋色 不能使用overflow:hidden,因为在Chrome浏览器下页面中不可见元素的drop-shadow也是不可见的，因此可以用border，区域内但透明 .icon{ position:relative;left:-20px; border-right:20px solid transparent; filter:drop-shadow(20px 0); }查看全部
-
boder-style:solid 构建三角和梯形 .triangle{ width:0px;height:0px; border-width:12px 20px; border-style:solid; border-color:red red transparent transparent; } 上下两个梯形边框拼合组成圆角效果查看全部
-
background-position定位只能相对于左上角，当需要距离右边缘时，可以用border border-right:50px solid transpanrent;(透明边框) background-position:100% 40px;查看全部
-
boder-color默认颜色就是color，类似的有box-shadow，text-shadow~ 只要一个color hover变化，就可以一起变色查看全部
-
boder-style：dashed;虚线：Chrome/FireFox宽高3:1；IE宽高2:1，因此只能安安静静做个虚框 border-style:dotted;点线：Chrome/FireFox:小方；在IE7，IE8中用该样式画圆以及圆角矩形： .dotted{ width:150px;height:150px; boder；149px dotted #cd0000 } .box{ width；150px;height:150px; overflow:hidden; } 圆角矩形：多画两个矩形 boder-style:double;双线：计算规则：双线宽度永远相等，中间间隔+-1 可以画三道杠图标：{ width:120px;height:20px; boder-top:60px double; boder-bottom:20 solid; }查看全部
-
border-width不支持百分比值：语义和使用场景决定，边框不会因设备大小而变化 类似：outline,box-shadow,text-shadow,... border-width支持关键字thin，medium,thick,默认medium：3px，用的最多是thin：1px，因为border-style:double至少3px才有效果查看全部
-
background-position默认左上方定位查看全部
-
默认color颜色查看全部
-
右侧定位查看全部
-
三角形查看全部
-
等高布局实现 1.一侧为固定像素，可以使用border实现； 2.百分比等高布局，用margin，padding实现查看全部
-
图片定位相对左边定位，定位不计算边框，可以将边框设置为透明查看全部
举报
0/150
提交
取消