国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS三角的寫法（兼容IE6）

zhisheng / 3244人閱讀

摘要：而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的就會到瀏覽器可視區域的上面。

目錄

簡介

優點

原理

1. 先創建一個div

2. 然后給div設定邊框。

3. 給div的四個邊框都設置不同的顏色

4. 把寬度和高度都變成0

5. 其余角為透明

6. 兼容IE6瀏覽器

造成這樣的原因是：

最簡單的解決辦法：(后面添加)

其他的解決辦法：

7. 解決內聯元素的三角顯示問題

為什么會有這個問題

解決辦法

1. 去掉固定的內容高度

2. 將內聯元素轉化為塊級元素或者行內塊元素

3. 將元素脫標（如果涉及特殊的布局可以直接使用）

最終代碼

擴展

有角度的三角

有一個角是直角的三角

箭頭

對話框

兼容IE8的小圓角矩形

利用css3旋轉來制作三角形

簡介

三角的做法有好幾種：

圖片、精靈圖（網易）


字體圖標（京東）


純代碼寫（亞馬遜）

這里主要介紹的純代碼寫的。

優點

代碼寫的三角，不管大小是多少，是不失真的。

代碼運行比圖片更快。

如果項目中沒有引用字體圖標，代碼寫是比較可靠的。

原理 
原理就是使用css的盒模型中的border屬性

使用border屬性就可以實現一個兼容性很好的三角圖形效果，其底層受到border-style的inseet/outset影響，邊框3D效果在互聯網早期還是很流行的，。
1. 先創建一個div
2. 然后給div設定邊框。 
div{
    width:200px;
    height:100px;
    border:10px solid red; 
}

可以看到效果：

3. 給div的四個邊框都設置不同的顏色 
div{
    width:200px;
    height:100px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

可以看到以下效果：

可以看到兩個border交叉的地方，有斜邊存在。

4. 把寬度和高度都變成0 
div{
    width:0px;
    height:0px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

/*也可以這么寫*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:red green blue yellow;
}

可以看到以下效果：

這個時候就看得很明顯了，出現了四個三角。那如果要出現一個，那么就將其他的三個弄成透明色就可以了。

這個就是三角形的由來。

5. 其余角為透明

這里的設置也遵循 上右下左 的順序，把不需要的角弄成透明色。

div{
    width:0px; 
    height:0px;
    border-width:10px;   
    border-color:#f00 transparent transparent transparent;
    border-style:solid;
}

/*也可以再進行合并*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:#f00 transparent transparent transparent;
}

這樣一個三角就完成了。
那么問題來了，那就是兼容問題，IE6的兼容問題，如果不要求兼容IE6可以忽略下一步。

6. 兼容IE6瀏覽器

同樣的一個三角，在IE6的顯示是什么呢？

造成這樣的原因是：

IE6不支持border的transparent

IE6的高度最小為19px，不支持高度為0

在IE6下面，如果想把元素例如div設置成19像素以下的高度就設置不了了。這是因為IE6瀏覽器里面有個默認的高度，IE6下這個問題是因為默認的行高造成的。
最簡單的解決辦法：(后面添加) 
div{
    /*不支持transparent*/
    border-style:solid dashed dashed dashed;
    /*高度最小不為0*/
    overflow:hidden;
}
其他的解決辦法：

查了查網上的，如果是IE6不支持transparent,

可以這么做：

div{
    border:solid 1px transparent; 
    _border-color:tomato; 
    _filter:chroma(color=tomato); 
}

所以我覺得用在這里也可以，BUT沒有親測過，如果哪位小可愛測過可以請告知我^ ^。

div{
    width:0px;
    height:0px;
    margin:100px auto;
    border-width:10px;
    border-style:solid;
    border-color:#f00 transparent transparent transparent;
    _border-color:#f00 tomato tomato tomato; 
    _filter:chroma(color=tomato);
}

如果是解決IE6的高度問題(也可以前面加下劃線，表示兼容的IE6)

div{
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
}
7. 解決內聯元素的三角顯示問題 為什么會有這個問題

因為我們剛才用

去制作三角，當然我們經常會使用或者偽元素去做一些小圖標。那么在顯示上面，可能會有問題。
下面的代碼：

可以看到頁面是這個樣子的:

為什么是這個樣子的，那么我們再看的仔細一點。
它實際是這個樣子的。

造成這樣的原因



是因為行內元素自己有固定的高度，不能設置寬高為0，所以上面下面都是50px沒有問題，但是中間撐開了距離，也就有了梯形的效果。


而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的border就會到瀏覽器可視區域的上面。
解決辦法

這個有很多的辦法：

1. 去掉固定的內容高度

使用font-size:0;可以去掉內容的固定高度。

em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    font-size: 0;
}
2. 將內聯元素轉化為塊級元素或者行內塊元素
em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    display: block;   /*也可以是inline-block*/
}
3. 將元素脫標（如果涉及特殊的布局可以直接使用）
/*脫標*/
em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    position: absolute;
    top:0;
    left:0;
}

/*or 浮動*/
em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    float:left;
}
最終代碼

下面就是兼容了IE6版本的三角代碼。

div{
    width:0px; /*設置寬高為0*/
    height:0px;/*可不寫*/
    border-width:10px;   /*數值控制三角的大小，垂直的位置*/
    border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
    border-style:solid dashed dashed dashed;/*設置邊框樣式，dashed是兼容IE6寫的*/
    overflow:hidden;/*兼容IE6最小高度不為0寫的*/
}

改變border-width,三角變大，是不失真的。很清晰。

==三角制作完成。==

擴展 有角度的三角

上面制作的都是45度的三角，三角可以通過border的高度寬度確定角度。

比如這樣一個三角，只需要確定上下的和左右的寬度不一樣即可。

div{
    width: 0px;
    height: 0px;
    margin: 100px auto;
    border-width:10px 30px;
    border-color:transparent transparent transparent red;
    border-style:solid;
}
有一個角是直角的三角

觀察可以看到，是上面和右面的三角同時設置成一個顏色。就會出現直角的三角。

div{
    width: 0;
    border-width: 20px 10px;
    border-style: solid;
    border-color: red red transparent transparent;
}
箭頭

其實原理也簡單，就是兩個三角重疊在一起。上面的三角就是背景的顏色
對話框

這個使用偽元素去做就很方便。




早安，哈哈！今天天氣不錯，很好！
兼容IE8的小圓角矩形

原理就是一個矩形，上面和下面使用偽元素設置。

before是方向朝上的梯形，after是方向朝下的梯形。

注意不要太寬了，否則會變成切邊矩形，這樣就可以避免border-radius的兼容問題
利用css3旋轉來制作三角形

如果可以用到css3，也可以使用到transform的rotate屬性

大概原理圖就是：
將里面的旋轉45度，外面的overflow:hidden即可

最終效果圖是：

@version1.0——2018-11-8——創建《CSS三角的寫法（兼容IE6）》

?burning_韻七七

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

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

相關文章

  • CSS三角的寫法（兼容IE6）

    摘要：而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的就會到瀏覽器可視區域的上面。 目錄 簡介 優點 原理 1. 先創建一個div 2. 然后給div設定邊框。 3. 給div的四個邊框都設置不同的顏色 4. 把寬度和高度都變成0 5. 其余角為透明 6. 兼容IE6瀏覽器 造成這樣的原因是： 最簡單的解決辦法：(后面添加) 其他的解決辦法： 7. 解決...

    LeexMuller 評論0 收藏0

  • CSS三角的寫法（兼容IE6）

    摘要：而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的就會到瀏覽器可視區域的上面。 目錄 簡介 優點 原理 1. 先創建一個div 2. 然后給div設定邊框。 3. 給div的四個邊框都設置不同的顏色 4. 把寬度和高度都變成0 5. 其余角為透明 6. 兼容IE6瀏覽器 造成這樣的原因是： 最簡單的解決辦法：(后面添加) 其他的解決辦法： 7. 解決...

    LMou 評論0 收藏0

  • 追求極致--純css制作三角、圓形按鈕，兼容ie6

    摘要：參考了天貓微博等網站的做法，用純和實現，效果還是不錯的。宋體三角形圓形提示盒子用做的提示盒子，上三角是純，盒子圓角用到用做的提示盒子，上三角是純，盒子圓角用到 參考了天貓、微博等網站的做法，用純html和css實現，效果還是不錯的。 以下是成果，兼容主流瀏覽器，包括ie6。 showImg(http://dtop.powereasy.net/UploadFiles/Article/2...

    shevy 評論0 收藏0

  • 使用css實現全兼容的三角形

    摘要：基本原理大同小異，這里主要介紹利用當然還可以使用的旋轉技術實現，由于兼容性問題這里不涉及了。利用是一種常用而且簡單兼容的方式 在當前流行的的網站上，我們經常會看到一些小三角形的下拉提示（微博頂部的下拉菜單），簡單的方式可以使用一張圖片代替，但是隨著前端技術的發展，以及開發者對于前端性能的吹毛求疵，越來越多的前端開發者開始返璞歸真，在能不使用圖片的場景中減少圖片使用，css圖標相對于圖片...

    zzbo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<