-
background-position在css2中，只能左上定位，無法右下定位查看全部
-
hover與圖形變色：利用了border-corlor默認(rèn)為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默認(rèn)是color，類似的還有box-shadow,text-shadow等查看全部
-
border-style：double的計(jì)算規(guī)則查看全部
-
實(shí)現(xiàn)任意大小圓角查看全部
-
利用IE瀏覽器下dotted border顯示為圓做圓角查看全部
-
border-width查看全部
-
border實(shí)現(xiàn)等高布局：左側(cè)導(dǎo)航條不斷的添加，右邊顯示的文本框也隨著變大而變大; CSS代碼： .box{ //父元素盒子 border-left:300px solid #222; } .left{ width:300px margin-left:-300px float:left; } HTML結(jié)構(gòu)樣式: <div class='box'> <nav class='left'> <h3>導(dǎo)航1</h3> </nav> <section> <div class='module'>模塊1</div> </section> </div>查看全部
-
透明border突破可視區(qū)域的限制： .icon{ position：relative; left：-20px; border-right：20px solid rgba(0,0,0,.25); filter:drop-shadow（20px 0）; }查看全部
-
增加可視渲染區(qū)域： drop-shadow可以給png圖標(biāo)賦色 .icon{ filter：drop-shadow(20px 0 #ff8040); }查看全部
-
增加響應(yīng)區(qū)域大小-復(fù)選框： .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定位相對(duì)于左上方定位，因?yàn)槟壳盀橹箷簳r(shí)不支持計(jì)算，我們可以使用如下代碼，讓background-position 定位在右下方： border-right：50px solid transparent； //透明邊框靠右 background-position： 100% 40px;查看全部
舉報(bào)
0/150
提交
取消