HTML/CSS

W3Cways.com 微信公众号

CSS3实现0.5像素边框-Web前端(W3Cways.com) - Web前端学习之路

CSS3实现0.5像素边框

admin阅读(543)评论(0)

实现方法 1.设置目标元素作为定位参照 2.给目标元素添加一个伪元素before或者after,并设置绝对定位 3.给伪元素添上1px的边框 4.设置伪元素的宽高为目标元素的2倍 5.缩小0.5倍(变回目标元素的大小) 6.再把border...

CSS3滤镜(Filter)效果集合-Web前端(W3Cways.com) - Web前端学习之路

CSS3滤镜(Filter)效果集合

admin阅读(895)评论(0)

滤镜起初是SVG规范的一部分。然而,当滤镜效果越来越明显时,W3C开始为CSS增加一些常用的滤镜效果。CSS过滤器是非常强大的,并且非常容易使用。可以来为图像或者其他添加模糊、灰度、亮度等效果。它们可以单独使用,也可以与其他滤镜组合使用,并...

带你轻松打开SVG动画的大门-Web前端(W3Cways.com) - Web前端学习之路

带你轻松打开SVG动画的大门

admin阅读(810)评论(0)

首先我们定义一块画布,然后在上面画一个圆形 他看起来应该是这个样子的:(每一个实例我都会附加图片以及demo链接,方便直观的理解与源代码的查看,查看的时候请使用标准浏览器) 点击查看Demo 现在我们就让这个圆动起来 动起来是这个样子的(g...

web图片滤镜的性能比较-Web前端(W3Cways.com) - Web前端学习之路

web图片滤镜的性能比较

admin阅读(958)评论(0)

随着浏览器的图形渲染能力不断提高,设计的能力也变的越来越真实。几行代码就能产生快速且富有视觉冲击力的效果。和大多数web开发一样,有很多种方法来实现同样的效果。 在这篇文章中,我们将会评估最流行的”图片特效”,...

SVG线条(stroke)动画实现原理-Web前端(W3Cways.com) - Web前端学习之路

SVG线条(stroke)动画实现原理

admin阅读(977)评论(0)

相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polyg...

解决-webkit-overflow-scrolling:touch的Bug-Web前端(W3Cways.com) - Web前端学习之路

解决-webkit-overflow-scrolling:touch的Bug

admin阅读(1528)评论(0)

-webkit-overflow-scrolling介绍 -webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果. 兼容安卓和IOS的写法如下 取值 auto 使用普通滚动, 当手指从触摸屏上移开...

解决overflow:hidden在IOS移动端无效的问题-Web前端(W3Cways.com) - Web前端学习之路

解决overflow:hidden在IOS移动端无效的问题

admin阅读(2112)评论(3)

假设页面上有个弹出窗,弹出窗出现后,只想让用户的视觉锁定在弹出窗上,正常我们会想到用overflow:hidden这个属性来实现,如下 这样写在PC端上没有任何问题,效果杠杠到,但是在IOS移动端上,弹出窗出现后,依旧可以在背景层部分滑动 ...

解决:hover伪类在移动端二次点击的问题-Web前端(W3Cways.com) - Web前端学习之路

解决:hover伪类在移动端二次点击的问题

admin阅读(1149)评论(2)

假设有个a标签 在PC端中,默认链接颜色是红色, hover的时候,链接颜色是蓝色,点击一次跳转到“http://www.wc3ways.com” 但是在移动端上中,第一次点击,链接颜色变蓝(也就是移动端上点击会触发伪类效果),再点一次才会...

css hack区分Chrome和Safari(PC版)-Web前端(W3Cways.com) - Web前端学习之路

css hack区分Chrome和Safari(PC版)

admin阅读(922)评论(0)

Chrome和Safari都是webkit内核,但是有时候用起来却很头疼。 比如,Chrome现在版本最小支持的字体大小是12px,然而Safari却不是。 比如有一个字体需要设置9px, 常规写法可以怎么写 上面这样写,除了Safari,...

清除IOS下input及textarea的阴影-Web前端(W3Cways.com) - Web前端学习之路

清除IOS下input及textarea的阴影

admin阅读(2609)评论(0)

在IOS下,input表单以及textarea默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉: 转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 清除IOS下input及text...

Web前端开发-Web前端工程师--Web前端学习之路

联系我们