炫意html5
最早CSS3和HTML5移动技术网站之一

CSS3各属性范例整理

以下收集的是CSS3各属性范例,如圆角、阴影、动画等,都是些非常基础的知识,希望对你有所帮助!

CSS3边框圆角特效(border-radius):

属性:


border-top-right-radius


border-bottom-right-radius


border-top-left-radius


border-bottom-left-radius

如右下角圆角边框border-bottom-right-radius:

1
2
3
border-bottom-right-radius:2em;
-moz-border-radius-bottomright:2em;
-webkit-border-bottom-right-radius:2em;

推荐文章:css3中Border-radius实例讲解与学习

CSS3图片边框效果(border-image

取值:


none:默认值。无背景图。


image:使用绝对或相对 url 地址指定背景图像。


number:边框宽度用固定像素值表示。


percentage:边框宽度用百分比表示。


[ stretch | repeat | round ]:拉伸 | 重复 | 平铺 (其中stretch是默认值。)

分解属性:


border-image-source 指定border的背景图的url


border-image-slice 设置图片如何切割的属性,非定位!


border-image-width 定义border-image的显示区域的


border-image-repea   重复方式

如图片重复边框:border-image,type=round

1
2
3
4
border-width:15px;
-moz-border-image:url(图片地址) 30 30 round;
-webkit-border-image:url(图片地址) 30 30 round;
border-image:url(图片地址) 30 30 round;

推荐文章:css3.0:border-image 边框背景(一)

CSS3阴影效果(box-shadow):

取值:  ? ? || 分别是阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色

如div阴影效果:

1
2
3
box-shadow:5px 5px 10px 0px #000;
-moz-box-shadow:5px 5px 10px 0px #000;
-webkit-box-shadow:5px 5px 10px 0px #000;

推荐文章:CSS3属性box-shadow使用教程

CSS3背景(background-image

新增了4个属性,分别是:


Background Clip:控制背景显示的位置


Background Origin:用来确定背景图片在box中的定位,需要与background-position配合使用


Background  Size:用来重设你的背景图片


Background Break:控制背景在不同区域显示

如设定背景大小:

1
2
3
4
5
background-image:url(image/bg-1gif.gif);
background-repeat:no-repeat;
background-size:400px 180px;
-moz-background-size:400px 180px;
-webkit-background-size:400px 180px;

推荐文章:css3教程:background属性调整增强

CSS3透明度效果(opacity

值的范围为 0~1

如下:

1
2
opacity:0.5;
filter:Alpha(opacity=50) /*For IE8*/

 

CSS3旋转效果(transform

属性:


rotate():传递一个度数值来转动一个对象


skew():倾斜(ps中的斜切),参数是度数


scale():一个缩放功能,两参数的含义:依次x轴缩放 y轴缩放,如 scale(1.0, 0.75)


translate():基于X和Y 坐标重新定位元素


matrix():矩阵变换,就是基于X和Y 坐标重新定位元素

CSS3如下:

1
2
3
4
transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-o-transform:rotate(2deg);

 

CSS3动画效果(transition 

属性:


ransition-property:指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性


transition-duration:过渡效果的持续时间


transition-timing-function:指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy


transition-delay:指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”,初始默认值为0

CSS33如下:

1
2
3
4
5
6
7
8
#div{
height:280px;
transition:height 2s;
-webkit-transition:height 2s;
-moz-transition:height 2s;
-o-transition:height 2s;
}
}

 

转自:为网站而疯狂

炫意HTML5 » CSS3各属性范例整理

CSS3教程HTML5教程