css之border&三角形

1.border-width不支持百分比。那样不符合语义。同理，outline、box-shadow、text-shadow也不支持百分比 2.border-width支持关键字，thin（1px）、medium(3px)（默认）、thick(5px) 3.border-style为double要大于等于3px，才能有效果。3像素时1+1+1，4像素时1+2+1。 4.border-style:solid（实线）、dashed（虚线）、dotted（方点或圆点）、double（双线） 5.border-style为double的应用:菜单图标

#box{ width: 100px; height: 20px; border-top: 60px double; border-bottom:20px solid; }

6.border-style为inset，内凹；outset，外凸；groove，沟槽；ridge，山脊。没人用，不符合审美，兼容性差。 7.border-color：没有指定border-color时，使用文字的color作为边框的颜色值。同理。box-shadow、text-shadow、outline没有指定颜色时，使用文字的color作为颜色值。 8.border-color的应用 传统方法：代码复杂

<div id="box"></div> #box{ width: 100px; height: 100px; border:1px solid #ccc; position: relative; } #box:before{ content: ''; width: 10px; height: 60px; background-color: #ccc; position: absolute; left: 50%; top:50%; margin-left: -5px; margin-top: -30px; } #box:after{ content: ''; height: 10px; width: 60px; background-color: #ccc; position: absolute; top:50%; left: 50%; margin-top: -5px; margin-left: -30px; } #box:hover{ border-color:blue; } #box:hover:before{ background-color: blue; } #box:hover:after{ background-color: blue; }

新方法：不指定边框颜色，指定字体颜色

#box{ width: 100px; height: 100px; color:#ccc; border:1px solid; position: relative; transition:color 1s;//设置渐变 } #box:before{ content: ''; height: 60px; border-left:6px solid; position: absolute; left: 50%; top:50%; margin-top: -30px; margin-left: -3px; } #box:after{ content: ''; width: 60px; border-top: 6px solid; position: absolute; top:50%; left: 50%; margin-left: -30px; margin-top: -3px; } #box:hover{ color:blue; }

9.border与background定位 background-position是让背景图片相对左上角固定定位。

background-position:50px 40px;

如何让背景图片相对右上角固定定位？可以借助border来实现。background-position的计算是不包括border区域的，是相对padding盒子的。

{ border-right:50px solid transparent; background-position:100% 40px; } //这样就能让背景图片相对右边50px定位

10.border与三角形、梯形

{ width:100px;//中间白色正方形的宽 height:100px;//中间白色正方形的高 border:50px solid; border-color:orange red green blue; }

{ width:0px;//中间白色正方形的宽 height:0px;//中间白色正方形的高 border:50px solid; border-color:orange red green blue; }

只要让某些边透明，就能构造不同的三角形。

border-color:orange transparent transparent blue;

//梯形 { width: 40px; height: 40px; border: 50px solid; border-color:orange transparent transparent transparent; }

11.border与透明边框–用途很广 实现好看的单、复选框，优雅的增加响应区域大小： 当点击有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。

#checkbox{ visibility: hidden; } .checkbox{ display: block; width: 16px; height: 16px; 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; } #checkbox:checked + label{ background-color: red; } <div> <input type="checkbox" id="checkbox"> <label for="checkbox" class="checkbox"></label> </div>

drop-shadow给png图标赋色: filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); webkit-filter:drop-shadow(x偏移, y偏移, 模糊大小, 色值);

.icon{ filter: drop-shadow(40px 0px red); -webkit-filter: drop-shadow(40px 0px red); } <img src="1.png" class="icon"height="25" width="33" alt="" >

右边红色的图标是绘制出来的。这样，只要将左边的图标隐藏起来，只留下右边图标，就能实现图标颜色变化。但是不在可视区域内的元素是没有投影的。这时候就要借助透明边框。

.wrap{ overflow: hidden; width: 33px; height: 25px; } .icon{ position: relative; left: -33px; border-right: 33px solid transparent;//加上边框，使得img的一部分仍然在可视区域内 filter: drop-shadow(33px 0px red); -webkit-filter: drop-shadow(33px 0px red); } <div class="wrap"> <img src="1.png" class="icon"height="25" width="33" alt="" > </div>

12.border与布局 等高布局：左边栏高度增大，右边栏高度也跟着增大；右边栏高度增大，左边栏高度也跟着增大

#box{ border-left: 300px solid #222;//利用边框的高度肯定跟背景一样高来实现 background-color: #ccc; } #left{ float: left; width: 300px; margin-left: -300px; } h3{ color: #fff; } .clearfix{ *zoom:1; } .clearfix:after{ content: ""; display: table; clear: both; } <div id="box" class="clearfix"> <nav id="left"> <h3>标题1</h3> <h3>标题1</h3> </nav> <section> <div>模块1</div> </section> </div>

局限：边框不支持百分比宽度。

利用margin/padding实现等高布局：

#box{ background-color: #ccc; overflow: hidden; } #left{ float: left; width: 50%; background-color: #333; margin-bottom: -600px;//margin-bottom 给一个很大的负值，再用padding填充回来。 padding-bottom: 600px; } h3{ color: #fff; } section{ overflow: hidden; }

局限：如有锚点定位会飞上去