-
background-position在css2中，只能左上定位，无法右下定位查看全部
-
hover与图形变色：利用了border-corlor默认为color颜色 <html> <head> <style type="text/css"> .add{display:block; width:100px; height:100px; transition:color 0.25s; border:1px solid; color:orange;position:relative;} .add:before{content:""; width:80px; border-top:10px solid; position: absolute; top:45px;left:10px;} .add:after{content:""; height:80px; border-left:10px solid;position: absolute; top:10px;left:45px;} .add:hover{color:red;} </style> </head> <body> <a class="add"></a> </body> </html>查看全部
-
border-color默认是color，类似的还有box-shadow,text-shadow等查看全部
-
border-style：double的计算规则查看全部
-
实现任意大小圆角查看全部
-
利用IE浏览器下dotted border显示为圆做圆角查看全部
-
border-width查看全部
-
border实现等高布局：左侧导航条不断的添加，右边显示的文本框也随着变大而变大; CSS代码： .box{ //父元素盒子 border-left:300px solid #222; } .left{ width:300px margin-left:-300px float:left; } HTML结构样式: <div class='box'> <nav class='left'> <h3>导航1</h3> </nav> <section> <div class='module'>模块1</div> </section> </div>查看全部
-
透明border突破可视区域的限制： .icon{ position：relative; left：-20px; border-right：20px solid rgba(0,0,0,.25); filter:drop-shadow（20px 0）; }查看全部
-
增加可视渲染区域： drop-shadow可以给png图标赋色 .icon{ filter：drop-shadow(20px 0 #ff8040); }查看全部
-
增加响应区域大小-复选框： .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; }查看全部
-
border梯形原理绘图： .triangle{ width:600px; border:100px solid; border-color:transparent transparent #c00; }查看全部
-
等腰三角形箭头垂直向下： .triangle{ width：0px; height:0px; border:100px solid; border-color: red transparent transparent transparent; }查看全部
-
background-position定位相对于左上方定位，因为目前为止暂时不支持计算，我们可以使用如下代码，让background-position 定位在右下方： border-right：50px solid transparent； //透明边框靠右 background-position： 100% 40px;查看全部
举报
0/150
提交
取消