传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari 5.Chrome 4和Firefox 4. 1  border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径").为这个属性提供一个值,就能同时设置四个圆角的半径.所有合法的CSS度量值都可以使用:em.px.百分比等等.比如,下面是一个d…

用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text-stroke可以为文字添加边框.它不但可以设置文字边框的宽度,也能设置其颜色.而且,配合使用color: transparent属性,你还可以创建镂空的字体! 语法如下: -webkit-text-stroke:宽度 颜色 接下来,为读者准备了一个实例,为段落元素添加文字描边.若浏览器不支持描边则…

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通过CSS3,我们能够创建动画,可以在许多网页中取代动画图片.flash动画以及JavaScript. 1  关键帧keyframes 如需在CSS3中创建动画,我们需要先学习@keyframes规则.前面所提到transition制作的过渡效果,包括了初始属性和最终属性,一个开始执行动作时间和一个延…

本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CSS3增加了弹性盒模型,我们可以为盒模型增加阴影和倒影.CSS3的分栏布局让WEB开发人员轻松的让文本呈现多列显示.传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,仅需要通过设置border-radius属性即可.通过CSS3,我们能够创建圆…

通过CSS3,我们能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框.并且不需使用设计软件,比如photoshop. 1  边框图片border-image border-image为边框应用图片,顾名思义就是为图片应用背景图片.它和我们常用的background属性比较相似,但是又比背景图片复杂一些.例如: background: url(“image.jpg”) 10px 20px no-repeat;       border-image属性是一个简写属性,用于设置以下属性,具体描述如表…

5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋转:使用rotateY()函数允许一个元素围绕Y轴旋转:使用rotateZ()函数允许一个元素围绕Z轴旋转: rotateX()函数指定一个元素围绕X轴旋转,旋转的量被定义为指定的角度:如果值为正值,元素围绕X轴顺时针旋转:反之,如果值为负值,元素围绕X轴逆时针旋转.其基本语法如下:  rotate…

3  perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素. perspective-origin属性的使用语法如下: perspective-origin: tx ty; 该属性的默认值为“50%  50%”,可以设置一个值,也可以设置两个长度值.其取值及描述如表3 表3 perspective-origin…

3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解.transform-style指定嵌套元素如何在3D空间中呈现.主要有两个属性:flat和perserve-3d. transform-style属性的使用语法如下: t…

3  scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01到0.99之间的任何值,使一个元素缩小:而任何大于或等于1.01的值,让元素显得更大.缩放scale()和translate()函数的语法非常相似,它可以接受一个值,也可以同时接受两个值,如果只有一个值时,其第二个值默认与第一个值相等.例如:scale(1,1)元素不会有任何变化,而scale(2,…

通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性包含transform和transform-origin,它们的介绍如表1: 表1  转换属性 其中,transform有五种方法,它们的方法介绍如表2: 表2  transform方法 1  translate()方法 通过translate() 位移函数,元素从其当前位置移动,根据给定的left…