css3重要样式属性

昨天我们又学习了一些新的选择器，今天我们来学习css3中一些样式属性

一文字相关样式

首先我们先来看一下设置文字的相关属性

（1）第一个肯定就是设置文字的颜色了，我们通过color属性进行设置

透明度:opacity属性指定了一个元素的透明度。

RGBA：

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

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

文本的阴影

语法:text-shadow:h-shadow（必写，水平阴影的位置，可以为负值） v-shadow（必写，垂直阴影的位置，可以为负值） blur（可以选写，阴影模糊的距离） color（可以选写，阴影的颜色）；

例如：

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 规则中定义的

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

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

CSS3 @font-face 规则

使用您需要的字体

在新的 @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>

 圆角边框（border）

语法

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；//左上角、右上角、右下角、左下角

 

css边框阴影

在css3中，box-shadow用于向边框添加阴影

语法

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

 

 背景渐变

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

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

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

可以用rgba产生渐隐效果

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

to left    to top left   ，1turn 1圈

 repeating-linear-gradient   重复渐变

径向渐变

 background: radial-gradient(shape size at position ,颜色  0%,颜色  50%, 颜色 100%)

background:radial-gradient(circle at 50px 50px,#fff,#000)

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

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

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

size 大小 径向渐变的大小

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

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

3)  英文单词 

 

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

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

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

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

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

background-image: -webkit-radial-gradient(closest-side at 30% 50% ,#0f0,#030,blue);

position 位置

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

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

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

3）英文单词

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

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

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

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

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

      at bottom