CSS3欲速则不达—过渡效果(Transition)

CSS3欲速则不达—过渡效果(Transition)

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration

以上翻译过来大概意思就是 :在某段时间内,按照预定过程的来改变某个CSS属性。

Transition又包含了四个独立的属性,分别为property、duration、timing-function、d

阅读更多»

CSS3欲速则不达—Transfrom(2D变形)

CSS3欲速则不达—Transfrom(2D变形)

Transfrom(变形)是CSS3中的新属性,Transfrom有旋转rotate、扭曲skew、缩放scale和移动translate几种变形。还有一种是矩阵变形matrix,无论是旋转还是拉伸什么的,本质上都是应用的matrix()方法实现的,因为讲解矩阵又要很长篇幅,所以不重点讲解。今天我们只来关心易于理解的旋转rotate、扭曲skew、缩放scale和移动translate几种变形,还

阅读更多»

CSS3欲速则不达—text-shadow 、 box-shadow 文字阴影效果

CSS3欲速则不达—text-shadow 、 box-shadow 文字阴影效果

将 text-shadow 和 box-shadow 放一起将是因为两者都是CSS3新增的阴影属性,有很多想多参数,所以也就好比较它们之间的不同之处。

可能因为很多web设计中用到大量阴影,所以使 text-shadow 和 box-shadow 成为目前为止不用加浏览器前缀的CSS3属性。IE9已经以及其他现代浏览器都支持box-shadow,而 text-shadow 在IE9下竟然不支持。解

阅读更多»

CSS3欲速则不达—Gradients渐变

CSS3欲速则不达—Gradients渐变

CSS3 Gradients是CSS3新增的属性,Gradient有linear-gradient(线性渐变)和radial-gradient(径向渐变)。因为各个浏览器的CSS渲染引擎不同,导致属性前面都得加前缀-moz-(firefox)、-webkit-(chrome、Safari)、-o-(Opera)、 -ms-(IE10+),因为IE9也不支持CSS3的Gradient属性,所以只能通

阅读更多»

CSS3欲速则不达—border-radius圆角详解

CSS3欲速则不达—border-radius圆角详解

早期制作圆角都是使用图片来实现、通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法,但是都是需要增加多个无意义的标签来实现,造成代码亢余。如今有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,即减少了图片的更新制作,减少了亢余标签,我们可以直接使用CSS3中的Border-radius来制作。

Border-radius圆角属

阅读更多»

CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性

CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性

CSS2中色彩模式只有RGB色彩模式(RGB即RED、Green、BLue)和十六进制模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED、Green、BLue、Alpha)。

但是不管是RGB模式还是十六进制模式都无法主观感受,所以CSS3又加入HSL颜色模式。当然HSL模式也增加opacity的Alpha值:HSLA模式(HSL模式与HSLA

阅读更多»

CSS属性、伪类选择器,CSS3选择器

CSS属性、伪类选择器,CSS3选择器

CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持。IE6你该走了,我们会永远记住你的功绩的!IE6在天朝何时能寿终就寝!

以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器。

因为伟大的IE6不支持CSS2

阅读更多»

CSS3欲速则不达—box-sizing(盒模型)

CSS3欲速则不达—box-sizing(盒模型)

box-sizing是css3的新属性,作用是控制box以哪种”盒模型”(box model)渲染的。

盒子模型

首先我们来介绍盒模型,有两种: W3C盒子模型quirks mode(混杂模式)盒模型

/*盒子需要占据的位置为*/ 
width  = margin + border + padding + content.width;
hright = ma

阅读更多»

1