前端必看的8个HTML+CSS技巧 （2）

• CSS

.img-wrapper {

width: 400px;

height: 400px;

overflow: hidden;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

}

.img-wrapper img {

height: 400px;

-webkit-transition: 0.3s linear;

transition: 0.3s linear;

}

.img-wrapper img:hover {

transform: scale(1.1);

}

.img-wrapper {

display: inline-block;

box-sizing: border-box;

border: 3px solid #000;

}

如果你们想让图片更加炫酷可以加上图片过滤属性filter，让图片变灰或者变深褐色，然后悬停时候出现更加炫酷的颜色变幻。灰化的属性是filter: grayscale(100%);，然后深褐色化的属性是filter: sepia(100%)。其实图片还有很多过滤属性的，大家有兴趣也可以去尝试一下哦！

加入特殊效果的代码如下：

• HTML

<img

class=“grayscale-img”

src=“https://img-blog.csdnimg.cn/2020032211021728.png”

/>

<img

class=“sepia-img”

src=“https://img-blog.csdnimg.cn/2020032122230564.png”

/>

• CSS

/* ==============

• 灰度过滤

• ==============*/

.grayscale-img {

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

.grayscale-img:hover {

-webkit-filter: grayscale(0);

filter: grayscale(0);

}

/* ==============

• 深褐色过滤

• ==============*/

.sepia-img {

-webkit-filter: sepia(100%);

filter: sepia(100%);

}

.sepia-img:hover {

-webkit-filter: sepia(0);

filter: sepia(0);

}

🌟知识总结

• transform — 用于改变元素

• scale — 对元素进行放大和缩小

• filter — 图片过滤器

• grayscale — 灰度过滤

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

JavaScript