css魔法——左邊豎條的實現方法

Lemon_95 發布于2019-08-29 18:36 / 1872人閱讀

摘要：問題描述在只使用一個標簽的情況下實現左邊豎線通用標簽與樣式如下實現左邊豎線方法一使用方法二使用偽元素來實現每個標簽都會有及兩個偽元素，并且我們也經常用這類標簽做一些之類的小圖標。

問題描述：在只使用一個標簽的情況下實現左邊豎線

通用標簽與樣式如下：
html:

實現左邊豎線

css:

 .div1 {
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }

方法一：使用border

.div1 { border-left: 5px solid red;}

方法二：使用偽元素來實現

每個標簽都會有before及after兩個偽元素，并且我們也經常用這類標簽做一些Icon之類的小圖標。這里我們使用偽元素，也會很容易來實現想要的效果。

 .div1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
    }

方法三：內/外陰影

使用內陰影或者外陰影也能實現此效果，不過在有些Chrome（比如：Chrome/70.0）版本上會底部1px兼容性問題，其他瀏覽器沒遇到。

    /* 內陰影 */
    .div1{
        box-shadow:inset 5px 0px 0 0 red;
    }

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

在Chrome/70.0下顯示效果

方法四：drop-shadow

CSS3 新增濾鏡 filter 中的其中一個濾鏡drop-shadow，也可以生成陰影。

.div1{
   filter:drop-shadow(-5px 0 0 red); 
 }

方法五：漸變 linearGradient

 .div1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }

此外還可以用outline或者滾動條的形式來實現，但是這兩種的體驗效果或者兼容性都不是太好，不推薦使用。

云服務器 GPU云服務器頂級域名左邊的部分創造與魔法云鳥便宜的服務器創造與魔法所有服務器的云鳥在哪 JS輕松實現CSS設置

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

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

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

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

鄒強 2019-08-14 12:24 評論0 收藏0
CSS魔法堂：重拾Border之——不僅僅是圓角

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

_Dreams 2019-08-30 13:01 評論0 收藏0
CSS魔法堂：不得不說的Containing Block

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

opengps 2019-08-30 12:53 評論0 收藏0
前端每日實戰：42# 視頻演示如何用純 CSS 創作一個均衡器 loader 動畫

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

wuaiqiu 2019-08-29 15:35 評論0 收藏0