随笔分类 -  css3-属性学习

对css3属性的汇总，全面熟悉掌握相关技术。
CSS-3 Animation 的使用
摘要：在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，... 阅读全文
posted @ 2015-09-29 10:04 小数 阅读(537) 评论(0) 推荐(0)
CSS-3 Transition 的使用
摘要：css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition property,变换延续的时间：tran... 阅读全文
posted @ 2015-09-28 09:34 小数 阅读(528) 评论(0) 推荐(0)
CSS-3 Transform 的使用
摘要：CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。这篇主要是 Transform 的使用。Transform 字面上就是变形，改变的意思。在Css3中transform主要包括：旋转rotate， 扭曲skew,... 阅读全文
posted @ 2015-09-25 10:36 小数 阅读(712) 评论(0) 推荐(0)
CSS-3 box-shadow 的使用
摘要：box shadow是给对象实现图层阴影效果的。 语法： box shadow和text shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。 取值： box shadow属性至多有6个参数设置，他们分别取值： 阴影类型：此参数是一个可选值，如果不设... 阅读全文
posted @ 2015-09-24 17:20 小数 阅读(360) 评论(0) 推荐(0)
CSS-3 文字阴影—text-shadow 的使用
摘要：text shadow还没有出现的时候，大家在网页中的阴影就是用ps一张图片作为背景。那么现在有了CSS3的这个属性，日后我们的工作会更简洁些。text shadow之前出现过，不过不久就被Pass了，现在又重新返回来，也算是我们的福利了。这个属性被使用的还是非常广泛的，虽然我不是很喜欢，美学能力太... 阅读全文
posted @ 2015-09-23 11:43 小数 阅读(296) 评论(0) 推荐(0)
CSS3 - chrome，傲游，360极速浏览器不支持小于12px的字号的解决办法
摘要：google流量器chrome，傲游，360极速浏览器都是基于webkit内核浏览器，默认不支持小于font size小于12px 的字号，即定义font size小于12px时会发现字体大小依然是12px，解决办法，只需要在css文件的body{}里面增加 webkit text size adj... 阅读全文
posted @ 2015-09-08 17:46 小数 阅读(420) 评论(0) 推荐(0)
CSS-3 圆角Border-radius 的使用
摘要：那么早些年 圆角其实是有的，后来的草案中将它去掉了，现在从CSS3开始，又加入了回来。可以看出圆角的使用还是非常广泛的。那么在圆角还没有被加入进来之前，我们要实现圆角的效果，可能就是需要IMG图片来模拟了，定位到各个角落上。那么接下来简单的介绍有关圆角的使用，以及提供一些网上找到非常好的网址。 设置... 阅读全文
posted @ 2015-09-08 14:15 小数 阅读(502) 评论(0) 推荐(0)
CSS-3 新弹性盒模型属性
摘要：flex语法：flex：none | [ flex grow ] || [ flex shrink ] || [ flex basis ]取值： none：none关键字的计算值为: 0 0 auto [ flex grow ]：定义弹性盒子元素的扩展比率。 [ flex shrink ]：定义弹... 阅读全文
posted @ 2015-09-08 09:51 小数 阅读(381) 评论(0) 推荐(0)
CSS-3 RGBA的使用
摘要：由于IE 8及以下都不支持 RGBA()，所以往往大家都不用这个属性，而是用图层叠加的方式去实现我们想要的效果。因为 opacity 这个属性是会影响到子孙元素的。 例如： RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 255。百分数... 阅读全文
posted @ 2015-09-07 16:39 小数 阅读(503) 评论(0) 推荐(0)
CSS-3 渐变的使用
摘要：CSS3 渐变（gradients）可以让您在两个或多个指定的颜色之间显示平稳的过渡。 以前，您必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），您可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成... 阅读全文
posted @ 2015-09-06 12:51 小数 阅读(274) 评论(0) 推荐(0)