CSS
似俗似不俗
用最[俗]最[短]的内容讲前端知识
展开
-
都是写阴影box-shadow跟drop-shadow有啥不同
drop-shadow是css3的filter滤镜属性的一个方法,它的主要作用是用来做阴影,下图是它的兼容性。理论本章我们主要来说一下【drop-shadow】和【box-shadow】的区别。box-shadow和drop-shadow从功能上来都是给元素加阴影。从写法上来说,看起来很相似。// box-shadowbox-shadow: x(水平位置), y(垂直位置), blur...原创 2019-07-09 10:29:20 · 420 阅读 · 0 评论 -
CSS 为何从右向左解析
今天读了一篇探究CSS解析原理的文章,从中学习到了很多的知识,在此写一下个人对CSS为何从右向左解析的简单理解。渲染过程首先,解析器的顺序是【从右向左】执行,为什么是【从右向左】执行?这就要说一下浏览器的渲染过程。上图是webkit浏览器的渲染过程,可以看到HTML和CSS是两条分支,最后在DOM元素生成了DOM树,CSS生成了对应的StyleRules时,两者开始结合,在结合(Attac...原创 2019-07-13 11:11:34 · 972 阅读 · 0 评论 -
都是写阴影box-shadow跟drop-shadow有啥不同
drop-shadow是css3的filter滤镜属性的一个方法,它的主要作用是用来做阴影,下图是它的兼容性。理论本章我们主要来说一下【drop-shadow】和【box-shadow】的区别。box-shadow和drop-shadow从功能上来都是给元素加阴影。从写法上来说,看起来很相似。// box-shadowbox-shadow: x(水平位置), y(垂直位置), blur...原创 2019-07-04 13:26:39 · 557 阅读 · 0 评论 -
CSS实现按钮凸出的翻转卡片
今天来讲如何写出一个按钮带有凸出感的翻转卡片。gif表现的太生硬了,真实效果比gif好。原理主要属性涉及:backface-visibility、transform-style、transform这三个属性。主要思路:通过Y轴的翻转实现【翻面效果】,Z的偏移量实现【凸出】效果显示。实战步骤一、// 基本结构<div class="card"> <div cla...原创 2019-07-04 22:25:57 · 1332 阅读 · 1 评论 -
一个文字hover效果的例子(一)
一个文字hover效果的例子(一)原创 2019-07-20 11:56:30 · 2422 阅读 · 0 评论