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

資訊專欄INFORMATION COLUMN

css魔法——左邊豎條的實(shí)現(xiàn)方法

Lemon_95 / 1918人閱讀

摘要：?jiǎn)栴}描述在只使用一個(gè)標(biāo)簽的情況下實(shí)現(xiàn)左邊豎線通用標(biāo)簽與樣式如下實(shí)現(xiàn)左邊豎線方法一使用方法二使用偽元素來(lái)實(shí)現(xiàn)每個(gè)標(biāo)簽都會(huì)有及兩個(gè)偽元素，并且我們也經(jīng)常用這類標(biāo)簽做一些之類的小圖標(biāo)。

問(wèn)題描述：在只使用一個(gè)標(biāo)簽的情況下實(shí)現(xiàn)左邊豎線

通用標(biāo)簽與樣式如下：
html:

實(shí)現(xiàn)左邊豎線

css:

 .div1 {
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }
方法一：使用border 
.div1 { border-left: 5px solid red;}
方法二：使用偽元素來(lái)實(shí)現(xiàn)

每個(gè)標(biāo)簽都會(huì)有before及after兩個(gè)偽元素，并且我們也經(jīng)常用這類標(biāo)簽做一些Icon之類的小圖標(biāo)。這里我們使用偽元素，也會(huì)很容易來(lái)實(shí)現(xiàn)想要的效果。

 .div1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
    }
方法三：內(nèi)/外陰影

使用內(nèi)陰影或者外陰影也能實(shí)現(xiàn)此效果，不過(guò)在有些Chrome（比如：Chrome/70.0）版本上會(huì)底部1px兼容性問(wèn)題，其他瀏覽器沒(méi)遇到。

    /* 內(nèi)陰影 */
    .div1{
        box-shadow:inset 5px 0px 0 0 red;
    }

    /* 外陰影  有些Chrome（比如：Chrome/70.0）版本上會(huì)底部1px兼容性問(wèn)題，顯示效果如下圖*/
    .div1{
        box-shadow:-5px 0px 0 0 red;
    }

在Chrome/70.0下顯示效果

方法四：drop-shadow 
CSS3 新增濾鏡 filter 中的其中一個(gè)濾鏡drop-shadow，也可以生成陰影。


.div1{
   filter:drop-shadow(-5px 0 0 red); 
 }
方法五：漸變 linearGradient 
 .div1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }

此外還可以用outline或者滾動(dòng)條的形式來(lái)實(shí)現(xiàn)，但是這兩種的體驗(yàn)效果或者兼容性都不是太好，不推薦使用。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114440.html

相關(guān)文章

  • [Leetcode] Largest Rectangle (in Histogram) 最大矩形

    摘要：以此類推，如果一直到棧為空時(shí)，說(shuō)明剛出來(lái)的豎條之前的所有豎條都比它自己高，不然不可能棧為空，那我們以左邊全部的寬度作為長(zhǎng)方形的寬度。 Largest Rectangle in Histogram Given n non-negative integers representing the histograms bar height where the width of each bar...

    鄒強(qiáng) 評(píng)論0 收藏0

  • CSS魔法堂：重拾Border之——不僅僅是圓角

    摘要：擼代碼實(shí)現(xiàn)首頁(yè)檢驗(yàn)單查詢成品通用標(biāo)準(zhǔn)審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對(duì)角線，將作為邊的相交點(diǎn)。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...

    _Dreams 評(píng)論0 收藏0

  • CSS魔法堂：不得不說(shuō)的Containing Block

    摘要：前言魔法堂重新認(rèn)識(shí)和中提到在沒(méi)有兄弟盒子時(shí)，的左右邊框會(huì)與所屬的的左右相接觸。對(duì)于的元素若不存在的為的父，其為。正常情況若子尺寸尺寸，則子溢出溢出后的顯示效果由屬性值決定。異常情況下當(dāng)時(shí)，若子的尺寸大于的尺寸而城撐大。 前言 ?《CSS魔法堂：重新認(rèn)識(shí)Box Model、IFC、BFC和Collapsing margins》中提到在沒(méi)有floated兄弟盒子時(shí)，line box的左右邊...

    opengps 評(píng)論0 收藏0

  • 前端每日實(shí)戰(zhàn)：42# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)均衡器 loader 動(dòng)畫

    摘要：可交互視頻教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，容器中包含個(gè)子元素居中顯示定義均衡器的樣式定義均衡器豎條的動(dòng)畫效果最后，設(shè)置各豎條依次動(dòng)畫大功告成 showImg(https://segmentfault.com/img/bVbfmKG?w=400&h=304); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在...

    wuaiqiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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