css3 重要属性,CSS3---重要样式及属性

文字相关样式

颜色 (Color)

透明度：

opacity: 0.1;

opacity: 0.5;

opacity: 0.9;

RGBA：

color: rgba(255, 0, 0, 0.6);

注意: RGBA是在RGB的基础上多了控制alpha透明度的参数。

文本阴影

语法:

text-shadow:

h-shadow(必需。水平阴影的位置。允许负值)

v-shadow (必需。垂直阴影的位置。允许负值)

blur(可选。模糊的距离。)

color(可选。阴影的颜色);

图片7.png

text-shadow: 0 0 20px #fefcc9,

10px -10px 30px #feec85,

-20px -20px 40px #ffae34,

20px -40px 50px #ec760c,

-20px -60px 60px #cd4606,

0 -80px 70px #973716,

10px -90px 80px #451b0e;

CSS3 @font-face 规则

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的

图片8.png

firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称(比如 myFirstFont)，然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */

}

div{

font-family:myFirstFont;

}

边框样式

图片9.png

圆角边框 (Border)

图片10.png

语法

border-radius: length/% ;

border-radius: 一个值； //四个角都一样

border-radius: 值1 值2； //值1表示左上角、右下角；值2表示右上角、左下角

border-radius: 值1 值2 值3； //值1表示左上角；值2表示右上角、左下角；值3表示右下角

border-radius: 值1 值2 值3 值4；//左上角、右上角、右下角、左下角

CSS3 边框阴影

在 CSS3 中，box-shadow 用于向方框添加阴影：

语法 :

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

参数 :

图片11.png

图片12.png

div{

box-shadow: 10px 10px 5px #888888;

}

CSS3 边框图片

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

图片13.png

使用图片创建围绕 div 元素的边框：

div{

border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 hrome */

-o-border-image:url(border.png) 30 30 round; /* Opera */}

图片地址border-image-source：url();

图片切片border-image-slice{1，4}

1、顶部内偏移区域27px处横切一刀

图片14.png

2、接着距离右侧内偏移区域27px竖切一刀

图片15.png

3、紧接着距离底部内偏移区域27px横切一刀

图片16.png

4、接着距离左侧内偏移区域27px竖切一刀

图片17.png

图片18.png

边框图片宽度border-image-width

边框图片外凸border-image-outset (x,y)

边框图片重复border-image-repeat

多重背景

CSS3 多重背景图片

CSS3 允许您为元素使用多个背景图像。

为 body 元素设置两幅背景图片：

body{

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

}

背景渐变

渐变 (Gradients) ——线性渐变

background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%)

通过角度来确定渐变的方向。

后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。

可以用rgba产生渐隐效果

angle: left,right,top,buttom,30deg

repeating-linear-gradient 重复渐变

渐变 (Gradients) ——径向渐变

background: radial-gradient(颜色 0%,颜色 50% 颜色 100%)

：主要用来定义径向渐变的圆心位置。

length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。

percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。

left：设置左边为径向渐变圆心的横坐标值。

center：设置中间为径向渐变圆心的横坐标值或纵坐标。

right：设置右边为径向渐变圆心的横坐标值。

top：设置顶部为径向渐变圆心的纵标值。

bottom：设置底部为径向渐变圆心的纵标值。

：主要用来定义径向渐变的形状。

circle：如果和大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变

ellipse：如果和大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

：主要用来确定径向渐变的结束形状大小。

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

块级元素居中

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%)

2.已知宽度和高度

width:100px;

height:100px;

margin-left:-50px;

margin-top:-50px;

position:absolute;

left:50%;

top:50%;