有趣的css面试题

Posted 2020-08-15

在微信公众号上看到一些有趣的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;
}

对于只是模拟出这个样式来说，这个方法让人眼前一亮。