兼容性问题一直是让前端工程师脱发的主要罪魁祸首,所以,利用一些神器工具可以挽救你的发际线。先来一个兼容性全包括的代码片段,这是IE9不支持圆角的全系列:.gradient{
background: #d91915; /* Old browsers ...
2018年08月12日 4958
关于"css3"的文章
CSS教程
CSS3第十三课: steps animation逐帧动画,你不应该错过的最详篇!
animation动画除了可以实现补间动画外,还可以完成逐帧动画。在animation的属性中,有个属性animation-timing-function一共具有如下这些值,来自于MDN。/* Keyword values */
animation-timing-fu...
2018年06月27日 4365
CSS教程
CSS3第十二课:强大的多时间段animation动画!
animation动画与transition过渡动画有两个明显的区别:1、transition过渡动画只能执行一个时间段的动画,从初始到结束。而且必须有事件触发,比如hover事件,或者添加了新的class属性等。2、animation动画可以分时间段执行,比如第一个时间段执行一段动画,第二个时间段...
2018年06月04日 3709
CSS教程
CSS3第十一课:transform2D变形,注意多个变形的执行顺序!
用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。
一、transform变形
实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。
注意:变形...
2018年04月16日 4401
CSS教程
CSS3第十课:transition过渡动画(内附神器!)
在十年前,我用flash做动画的时候,总结了一下flash的运动规律,主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起,似乎一夜之间,flash就没落了。想起自己曾经每天必逛的闪吧,在2012年也停止更新,虽然现在网站还在, 但也只是一个象征了,偶尔回去悼念一下,怀念过...
2018年03月30日 4387
CSS教程
CSS3第九课:重复放射性渐变repeating-radial-gradient
repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程:background-image之放射性渐变(radial-gradient)详解一...
2018年03月28日 4137
CSS教程
CSS3第八课:重复线性渐变repeating-linear-gradient
很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。CSS3教程:background-image之线性渐变(linear-gradient)最in版!时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!这个属性...
2018年03月24日 5469
CSS教程
CSS3第七课:background多重背景及新增属性
关于CSS3的边框、圆角、阴影等新特性,在以前的CSS3教程里面已经详细介绍过,在这个系列里面就不再啰嗦,有兴趣的可以直接查看CSS3教程系列。
这篇文章详细讲解一下CSS3多重背景这个新特性,真的是很强大。
一、多重背景的用法
ba...
2018年03月24日 3964
CSS教程
CSS3第六课:web中的颜色值以及rgba和opacity的区别
每次听一些web前端开发大神讲公开课或者看录制的视频,很多时候脱离了UI设计稿,大神们自己做案例的时候,都是用RGB三原色来搭配,或者直接red/blue/yellow/gray等颜色值,看得我眼睛火辣辣的痛,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、...
2018年03月22日 3641
CSS教程
CSS3第五课:rem、em、vh、vw等新增单位的用法
很早以前,大家都习惯用像素(px)这个单位来控制大小,但是随着响应式布局和跨平台跨设备的web应用的兴起,很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页...
2018年03月20日 7720
CSS教程
CSS3第四课:伪元素选择器,::before和::after就是左膀右臂!
讲完了伪类选择器,还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字,说明都是不存在的,但是它们也有区别:伪类是一种状态,伪对象是不真正存在于HTML文档中的标签对象,但是它是以html对象的方式虚拟出现,并且可以通过css控制的对象。在最新的CSS3标准中,把伪对象的格式改成了双冒号,即:...
2018年02月09日 4538
CSS教程
CSS3第三课:伪类选择器,为什么有一个伪字?
拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!一、CSS3新增伪类选择器在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-...
2018年02月08日 3317
CSS教程
CSS3教程:background-image之放射性渐变(radial-gradient)详解
写完了linear-gradient线性渐变的初级教程后,看到了Lea Veron博客上那个用渐变做的图案集,我瞬间就觉得自己的想象力弱爆了。容我躺躺,再站起来继续战斗!缓过来了,开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。别人都说径...
2016年08月05日 16507
CSS教程
CSS3教程:background-image之线性渐变(linear-gradient)最in版!
long long ago,我很不喜欢用CSS3的渐变,宁愿一切纯色扁平,因为那时候的渐变TMD太复杂了,版本太多了,真的很想死!今天百度linear-gradient的关键词,翻出的文章几乎都是2011年——2013年的,版本太out了,难道不知道webkit和moz已经手...
2016年08月02日 19868
CSS教程
CSS3教程:border-radius你以为就是个圆角边框吗?
很多人拿border-radius就是做点圆角效果,或者弄一个圆形的头像(说的就是以前的自己^_^),但,这些都是没有真正发掘border-radius的价值的!先看看一些别人的效果↓css3的border-radius各种参数设置下的圆角效果CSS3 border-radius圆角各个属性值作用演...
2016年08月01日 17200
CSS教程
CSS3教程:box-shadow盒阴影详解
最近忙着暑期补课,在招生路线上,搞得很紧张啊,我的痘痘都多冒了好几颗。关键是一个星期补六天课,还包括三个晚上,觉得日子怎么过得那么慢呢!忙里偷闲,还是继续CSS3的学习之旅吧。讲完了text-shadow,今天我们来八一八box-shadow这个看起来很相似的属性。在之前,也写了一篇box-shad...
2016年07月28日 11790
CSS教程
CSS3教程:text-shadow文字阴影详解
在web的早期战场,要实现文字或者图片或者盒的阴影效果,必须启用图片,导致html代码和css代码量都要增加很多,而现在,利用css3新增的text-shadow和box-shadow可以轻松完成阴影的添加,而且效果自然,不逊于ps制作出的效果,唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。...
2016年07月09日 14913
CSS教程
CSS3教程:利用border的transparent特性完成面包屑导航
border属性在CSS3新增了很多样式,比如border-radius圆角样式,其中可以为border-color设置transparent值则实现了利用该样式绘制三角形等的能力。transparent表示透明,透明不代表不存在。在CSS2里面,只能为background-color设置该值,在C...
2016年05月26日 3670
CSS教程
CSS3教程:box-shadow完成盒阴影效果
与text-shadow的原理一样,只不过text-shadow是为文字做阴影,而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。如果对盒对象不清楚的童鞋,可以先看这篇文章:CSS教程:display常用的四个值(...
2016年05月20日 6026