成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

pepperwang / 929人閱讀

摘要:常用的的單值屬性指的是邊框。注意邊框交替處為斜邊,是個(gè)梯形,用此屬性寫三角形開始用邊框?qū)懭切危葘⑻菪巫兂扇切?。下三角效果?biāo)簽設(shè)置成向下三角形透明

1.常用的border的單值屬性(border指的是邊框。)

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

其中border-style的屬性值有三種:
solid(實(shí)線),dashed(虛線為方塊),dotted(虛線為圓點(diǎn))
border-style的屬性值-效果圖

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

 border-width:
           四個(gè)值:上(10px)右(20px) 下(30px) 左(40px)
           border-width: 10px 20px 30px 40px;

           三個(gè)值:上(10px)右(20px) 下(30px) 左(20px)
           border-width: 10px 20px 30px ;

           兩個(gè)值:上(10px)右(20px) 下(10px) 左(20px)
           border-width: 10px 20px ;

           一個(gè)值:上下左右全是10px;
           border-width: 10px;

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

(1)首先查看邊框特性,邊框交替的位置是斜線
下面是代碼,border邊框?yàn)樘菪?,點(diǎn)擊查看




    
    border標(biāo)簽 part2
    


 

注意:邊框交替處為斜邊,是個(gè)梯形,用此屬性寫三角形


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

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

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




    
    border標(biāo)簽 part2
    


 


(3)向下三角形

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

下三角效果




    
    border標(biāo)簽 part2
    


 

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

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

相關(guān)文章

  • CSS基礎(chǔ)-何用border角形?

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

    ygyooo 評論0 收藏0
  • 何用css角形

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

    Yuqi 評論0 收藏0
  • CSS3常見技巧(二):何用CSS3來實(shí)現(xiàn)角形?

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

    Jonathan Shieber 評論0 收藏0
  • CSS3常見技巧(二):何用CSS3來實(shí)現(xiàn)角形

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<