有趣的css面試題（一）

標籤：公眾號   back   ati   濾鏡   ble   absolute   css   relative   有趣   

在公眾號上看到一些有趣的CSS面試題，在此做一下記錄。
css是前端的基礎，但是或許很多人都會忽視其一些屬性和樣式效果的實現，在此我也不例外，從這些面試題裡，可以再次看到css強大的功能，以及從面試題的思考中改善編程思維。
回到正題，先看題目一：

下面這個圖形，只使用一個標籤，可以有多少種方式。
左邊豎條.png

先對這個div做一個初始的樣式。

div{
position:relative;
width:200px;
height:60px;
background:#ddd;
}

法一：添加border （最簡單的一種）

border-left:5px solid deeppink;

法二：使用虛擬元素

div::after{
content:"";
width:5px;
height:60px;
position:absolute;
top:0;
left:0;
background:deeppink;
}

法三：外box-shadow

只需添加 box-shadow:-5px 0px 0 0 deeppink;

法四：內box-shadow

box-shadow:inset 5px 0px 0 0 deeppink;

法五：drop-shadow
drop-shadow是css3新增濾鏡filter中的其中一個濾鏡。

filter:drop-shadow(-5px 0 0 deeppink)

法六：漸層linearGradient
css3中的漸層分為線性漸層和放射狀漸層，這裡可以使用線性漸層來解決

background-image:linear-gradient(90deg,deeppink 0px,deeppink 5px,transparent 5px);

法七:輪廓outline

div{
height:50px;
outline:5px solid deepplink;
}
div{
position:absolute;
content:"";
top:5px;
bottom:-5px;
right:-5px;
left:0;
background:#ddd;
}

法八：捲軸
通過改變捲軸樣式實現

div{
width:205px;
background:deeppink;
overflow-y:scroll;
}
div::-webkit-scrollbar{
width:200px;
background-color:#ddd;
}

對於只是類比出這個樣式來說，這個方法讓人眼前一亮。

有趣的css面試題（一）