转眼间,2019年还有不到12个小时就要彻底过去,回顾自己这一年来,收获与失落并存。在这最后时刻,发一篇文章送给社区,也送给自己。
本文摘自这一年来自己在工作中经历的几个比较好的CSS问题(不一定复杂,但个人觉得都挺值得一说),这些CSS问题平时很少遇到,即使遇到后也不一定知道解决方案,即使知道解决方案也不一定知道产生的原理,同时也准备了2个JS问题(之前有整理过一篇较长的JS问题文章,在此不做推新)。本文会更新下去,希望帮到各位朋友。期待您的点赞,谢谢。
一、CSS篇
1.1 元素默认蓝色边框
input
标签元素(如button
、text
、areatext
)的一些事件(如click
、focus
等),在很多浏览器下默认会有蓝色边框出现,如把一个普通button
的background
和border
都设置为none
后,触发点击后样式如下:
![487907fee0e80c9ada5d8d7b467f6a33.png](https://img-blog.csdnimg.cn/img_convert/487907fee0e80c9ada5d8d7b467f6a33.png)
这是由元素默认的轮廓线产生的,这是浏览器的一种防护机制,起到突出元素的作用,把它干掉就行了,方法如下:
// 方法1:
outline: none / medium;
// 方法2:
outline-width: 0
1.2 背景透明,文字不透明
我们通常是使用 opacity
来做背景的透明化处理,该属性被所有浏览器支持,可以大胆使用,透明度从0.0(完全透明)到1.0(完全不透明),但该方法会使其所有子元素都透明,此时若只想让背景透明,其他不透明,则可以使用rgba
处理背景:
background-color: rgba( red , green , blue , alpha )
其中这个alpha
即设置透明度,取值在0~1之间。该方法除IE9以下不可用外,其他浏览器均可用,看一下效果:
![55b531779dcece2e29e7696182c6c5da.png](https://img-blog.csdnimg.cn/img_convert/55b531779dcece2e29e7696182c6c5da.png)
同理,我们也可以用这个方法把整个背景做透明了,即多写一个div
作为modal层做透明处理,可以明显看到上面文字并未透明:
![5312f12c2479ba427cc5d352af67bc1d.png](https://img-blog.csdnimg.cn/img_convert/5312f12c2479ba427cc5d352af67bc1d.png)
上述种效果代码如下ÿ