女王控的博客

前端

165 篇文章

SVG/Canvas中nonzero和evenodd填充规则

填充的两种规则 只要是路径填充,都有两种规则 nonzero 和 evenodd,无论是 SVG 中的路径填充,还是 Canvas 中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。 如果我们用 3 个点,连成一个三角形,则这两种填充规则没什么区别,如下对比 如果是两个三角形,并且发生重叠,差异就出现了,如下: 交叉点 填充规则的关键,就是确定复杂路径构成的图形,哪些是内部,哪些是外部。内部则填充,外部则透明。 “nonzero… »

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

假设页面中有下面这一段 HTML: 点击“返回顶部”这个文字链接的时候,页面就会“唰”地瞬间定位到浏览器顶部。 浏览器已经开始支持原生平滑滚动定位,CSS scroll-behavior 属性和 JS scrollIntoView()方法都可以。 CSS scroll-behavior 与平滑滚动 scroll-behavior:smooth 写在滚动容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑。 语法 初始值是’auto’。 凡是需要滚动的地方都加一句 scroll-behavior… »

CSS世界的层叠规则

所谓“层叠规则”,指的是当网页中的元素发生层叠时的表现规则。 默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生,有点儿类似于真实世界中“论资排辈”的感觉。 z-index 只是 CSS 层叠规则中的一部分 在 CSS 世界中,z-index 属性只有和定位元素(position 不为 static 的元素)在一起的时候才有作用,可以是正数也可以是负数。理论上说,数值越大层级越高,但实际上其规则要复杂很多。 但随着 CSS3 新世界的到来,z… »

js页面文字选中后分享到新浪微博实现

功能简述 一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能: 在 web 页面上,我们也是可以实现类似的效果的:划词 → 显示提示 → 分享。这就是本文要展示的内容。 效果与 demo 结语及补充 其实呢,此方法不仅支持新浪微博,支持企鹅微博(腾讯微博),狐狸微博(搜狐微博),也是可以的,只要根据各个微博分享页面的 API 地址,将 window.open()中的地址换换就可以了。 »

去除冗余 – 精简您的CSS样式代码

一些常见不必要 CSS 样式 与默认 CSS 样式一致 我们有时候写的 CSS 样式会与浏览器默认的 CSS 样式一致,有时候您自己都可能没有意识到。 常见的例子有: width / height 很显然,这段样式是没有必要的,默认的任何块状元素的高度几乎都是 auto。 padding 上面有关 body,p 等标签的样式中有个样式是无效的,与默认值一致的,这个样式就是 padding:0,对于 body,p,h1~6 这些标签,本身的 padding 值就是 0,所以只需要 margin:… »

0%