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

資訊專欄INFORMATION COLUMN

CSS三角的寫法(兼容IE6)

LeexMuller / 968人閱讀

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

目錄

簡介

優點

原理

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/99122.html

相關文章

  • CSS三角寫法兼容IE6

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

    zhisheng 評論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條評論

LeexMuller

|高級講師

TA的文章

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