CSS border屬性--妙用

heartFollower 發(fā)布于2019-08-29 12:54 / 2984人閱讀

摘要：在下實現(xiàn)圓角效果由于兼容性特別差，所以要在低版本瀏覽器下實現(xiàn)圓周角效果特別難利用的效果可實現(xiàn)如下圖所示的圓效果代碼簡單如下制作三杠效果其實就是利用特性變色我們在做如下圖標(biāo)時，一般情況下時會有三處變色但是利用繼承自這一特性

在ie下實現(xiàn)圓角效果

（由于border-radius兼容性特別差，所以要在ie低版本瀏覽器下實現(xiàn)圓周角效果特別難）
利用border-style的dotted效果可實現(xiàn)如下圖所示的圓效果：

代碼簡單如下





    
    
    
    Document

制作三杠icon效果

其實就是利用border-style double特性

hover變色

我們在做如下圖標(biāo)時，

一般情況下hover時會有三處變色

但是利用border-color繼承自color這一特性hover時可以只改一處，如下簡便的寫

利用透明邊框使得圖片定位容器右側(cè)變得容易

一般background-position是距離左上角定位的，比方說我想要距離上邊50px 左邊40px，可以

background-position: 50px 40px;

但是如果想要讓圖片距離距離下邊40px 右邊50px 怎么辦呢？

            border-right: 50px solid transparent;
            background-position: 100% 40px;

上面代碼就實現(xiàn)了這個功能，主要原因是background-position是不把border計算在內(nèi)的，所以100%......

制作三角效果

從最簡單的看起

利用邊框增加點擊區(qū)域響應(yīng)范圍

利用border點擊后有響應(yīng)，再配合box-shadow可增加響應(yīng)區(qū)域大小

實現(xiàn)兩欄等高布局

        .box {
            border-left: 300px solid transparent;
        }
        .left {
            width: 300px;
            margin-left: -300px;
            float: left;
        }
        
    
        這里是左邊欄內(nèi)容
        
            不管我右邊欄內(nèi)容多高，兩邊都是等高的，而且沒有任何瀏覽器兼容性問題

總結(jié)：
1）border-width不支持百分比，因為邊框不會因為元素尺寸的變化而縮放，類似的outline、box-shadown、text-shadow......都是不支持百分比的
2）border-color、text-shadown、drop-shadown、outline等都是從color繼承來的