CSS border屬性--妙用

heartFollower 發布于2019-08-29 12:54 / 2992人閱讀

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

在ie下實現圓角效果

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

代碼簡單如下





    
    
    
    Document

制作三杠icon效果

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

hover變色

我們在做如下圖標時，

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

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

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

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

background-position: 50px 40px;

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

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

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

制作三角效果

從最簡單的看起

利用邊框增加點擊區域響應范圍

利用border點擊后有響應，再配合box-shadow可增加響應區域大小

實現兩欄等高布局

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

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

云服務器 GPU云服務器 border屬性 css屬性訪問CSS屬性 position屬性，css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112226.html

CSS3 border-radius妙用

摘要：分解出來就是以左上角為例子小例子屬性允許您為元素添加圓角邊框效果總結可以用畫一些復雜的效果圖，下面鏈接大神畫的小豬佩奇，真是無所不能。 border-radius：左上右上右下左下（就是順時針）如果沒有4個值的情況下，缺的那個角的值與對角相等（如2、3、4） 1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;) 等價于...

andycall 2019-08-29 15:25 評論0 收藏0
CSS之FFC/GFC

摘要：全稱翻譯過來就是彈性格式化上下文。產生條件屬性值設置為為或者的容器布局規則的布局規則在中也有詳細定義，上可以找到詳細說明，。通常彈性布局使用，二維網格布局使用。最后，所有的與也是一個，在遵循自己的規范的情況下，向下兼容規范。 FFC FFC全稱Flex Formatting Contexts翻譯過來就是彈性格式化上下文。 FFC產生條件 display屬性值設置為flex或inline...

wemall 2019-08-29 17:29 評論0 收藏0
::before和::after偽元素的妙用

摘要：下面是偽元素和偽元素的具體用法和使用規則作用在標簽前后添加字符串使用規則后面一定要用把要添加的內容括起來，否則是無法顯示的括號不一定需要添加。場景：假如有一天，你的在寫一個前端項目，是關于一份點餐商家電話信息表，你啪塔啪塔地寫完了，突然間項目經理跑過來找你，要求你在每一個商家的電話號碼前都添加一個電話符號，來使得電話號碼更直觀和頁面更美觀。這個時候你就糾結了，這不是折磨人嗎？這不是要我在...

番茄西紅柿 2019-04-23 13:29 評論0 收藏0
web前端（11）—— 頁面布局1

摘要：維護起來更加方便不足雪碧的最大問題是內存使用拼圖維護比較麻煩使的編寫變得困難雪碧調用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設計師給我們的圖都會比這個大，那么我們可以此屬性來制作通天。要說頁面布局的話，那就必須說說margin，padding，和background。這三個屬性其實都是前面講過的，這里還是再次講解以下，為什么呢？因為是這樣的...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0
網站footer沉底效果的三種解決方案

摘要：沉底效果重點代碼總結以上三種方法都屬于沒什么副作用的，其實實現這種沉底效果還有別的實現方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。問題背景很多網站設計一般是兩個部分，content + footer，content里面裝的是網站主體內容，footer里面展示網站的注冊信息等等，因為網站內容高度不定的原因，會出現下面兩種情況：1.內容較少時，這個foot...

chanjarster 2019-08-26 13:57 評論0 收藏0