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

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)-如何用border寫三角形？

pepperwang / 926人閱讀

摘要：常用的的單值屬性指的是邊框。注意邊框交替處為斜邊，是個梯形，用此屬性寫三角形開始用邊框?qū)懭切?，先將梯形變成三角形。下三角效果標簽設(shè)置成向下三角形透明

1.常用的border的單值屬性（border指的是邊框。）

/*邊框樣式屬性*/
border-style: solid;
/*邊框顏色*/
border-color: #06a43a;
/*邊框?qū)挾?/
border-width: 10px;

其中border-style的屬性值有三種：
solid（實線），dashed（虛線為方塊），dotted(虛線為圓點)
border-style的屬性值-效果圖

其中顏色，寬度，樣式屬性值有四個方向。根據(jù)值的不同，對應(yīng)的方向不同
點擊查看詳情

 border-width:
           四個值：上（10px）右（20px） 下（30px） 左（40px）
           border-width: 10px 20px 30px 40px;

           三個值：上（10px）右（20px） 下（30px） 左（20px）
           border-width: 10px 20px 30px ;

           兩個值：上（10px）右（20px） 下（10px） 左（20px）
           border-width: 10px 20px ;

           一個值：上下左右全是10px;
           border-width: 10px;

2.用border邊框?qū)懭切?/p>

(1)首先查看邊框特性，邊框交替的位置是斜線
下面是代碼，border邊框為梯形，點擊查看




    
    border標簽 part2

注意：邊框交替處為斜邊，是個梯形，用此屬性寫三角形

（2）開始用邊框?qū)懭切?，先將梯形變成三角形?/p> 

1.設(shè)置寬高為0
2.給border-width設(shè)置值.
3.邊框設(shè)置顏色

梯形轉(zhuǎn)化為三角形




    
    border標簽 part2

（3）向下三角形

 1.設(shè)置div高寬為0
 2.設(shè)置border-width值
 3.其余三條邊為transparent（透明），視覺效果為下三角。

下三角效果




    
    border標簽 part2

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52108.html

相關(guān)文章

  • CSS基礎(chǔ)-如何用border寫三角形？

    摘要：常用的的單值屬性指的是邊框。注意邊框交替處為斜邊，是個梯形，用此屬性寫三角形開始用邊框?qū)懭切?，先將梯形變成三角形。下三角效果標簽設(shè)置成向下三角形透明 1.常用的border的單值屬性（border指的是邊框。） /*邊框樣式屬性*/ border-style: solid; /*邊框顏色*/ border-color: #06a43a; /*邊框?qū)挾?/ border-width: ...

    ygyooo 評論0 收藏0

  • 如何用css畫三角形

    摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。 在設(shè)計稿中，經(jīng)常會出現(xiàn)好多三角形，如果將三角形變成圖片，通過img標簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

    Yuqi 評論0 收藏0

  • CSS3常見技巧（二）：如何用CSS3來實現(xiàn)三角形？

    摘要：站長博客如何使用來畫一個三角形經(jīng)常令人非常感到困惑，其實原理上是寬度相等的邊距以度來連接。代碼如下實現(xiàn)效果如圖 站長博客：https://www.pipipi.net/ 如何使用CSS3來畫一個三角形經(jīng)常令人非常感到困惑，其實原理上是寬度相等的邊距以45度來連接。 首先看第一個圖showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

    Jonathan Shieber 評論0 收藏0

  • CSS3常見技巧（二）：如何用CSS3來實現(xiàn)三角形？

    摘要：站長博客如何使用來畫一個三角形經(jīng)常令人非常感到困惑，其實原理上是寬度相等的邊距以度來連接。代碼如下實現(xiàn)效果如圖 站長博客：https://www.pipipi.net/ 如何使用CSS3來畫一個三角形經(jīng)常令人非常感到困惑，其實原理上是寬度相等的邊距以45度來連接。 首先看第一個圖showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

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