有趣的css面试题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有趣的css面试题相关的知识,希望对你有一定的参考价值。

在微信公众号上看到一些有趣的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面试题的主要内容,如果未能解决你的问题,请参考以下文章

面试官:一道题看透你会不会css

一道有趣的面试题

一些JAVA中有趣的面试题

一道有趣的阿里面试题

WEB前端面试题

记录有趣面试题。。。。