前端开发

CSS 变量传值给JS

2020-02-2580次阅读javascriptcss3css
CSS变量出现前,从CSS传值给JS非常困难,甚至需要借助一些Hack的手法。现在使用CSS变量,你可以直接通过JS获取变量值并进行修改:
前端开发

CSS3中border-radius实现椭圆角还可以这样写

2020-02-1989次阅读css3css
CSS3中border-radius实现椭圆角,常规写法是border-radius:元素高度的一半。如果高度未知,请选择任意大的值(例如99em)。
前端开发

纯CSS加载中动画

2020-02-1783次阅读csscss3
纯CSS加载中动画,看源码
前端开发

HTML中CSS类的顺序真的无关紧要

2019-12-25195次阅读css
标签中的类只是按照编写的顺序读取CSS—在此示例中,级联取胜。也可以说CSS总是从上到下、从右到左进行,因此CSS的顺序与HTML中的类无关。
前端开发

使用伪元素增加可点击区域

2019-12-07253次阅读HTMLcss3css
根据网页无障碍阅读指南(WCAG)准则WCAG 2.1,触摸或鼠标的最小目标尺寸应为44×44像素。大小不是固定的,可能会根据使用情况而改变。但是,44×44像素是一个很好的起点。UX设计中要遵循的重要定律。简单地说,触摸或点击目标越大,越接近,用户与其进行交互的时间越短。仅通过更改元素的宽度和高度或使用填充,并不一定总是可以增大可点击区域。好吧,不妨使用伪元素增加可点击区域。因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域。
前端开发

CSS元素重叠并交织在一起的视觉效果

2019-11-06219次阅读csscss3
在本文中,我们将使用CSS创建两个元素重叠并交织在一起的视觉效果。
前端开发

CSS过滤数据

2019-10-14217次阅读css
css不能根据包含的内容来选择内容,但是它可以根据属性和这些属性的值进行选择。
前端开发

使用letter-spacing排版倒序文本

2019-09-03216次阅读css
通过letter-spacing设置负值字体间距将文本倒序
前端开发

一次css错误排查中再次认识到::伪元素

2019-08-19286次阅读css
很奇怪,CSS样式在IE7下都是正常的,就IE8下有问题,排查后发现是::伪元素的问题。
前端开发

重绘Repaint和回流Reflow以及如何进行优化

2019-08-07425次阅读cssHTML
由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outline, visibility, color、background-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。回流必定会发生重绘,重绘不一定会引发回流。