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)：

<style> 
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>

边框样式

图片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%)
<position>：主要用来定义径向渐变的圆心位置。
length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。
<shape>：主要用来定义径向渐变的形状。
circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。
<size>：主要用来确定径向渐变的结束形状大小。
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%;