实例学习 CSS3-1

（图片上传太麻烦，可以直接下载pdf查看全文）

1       文本阴影效果text-shadow

CSS2就已经有提出了，只是当时很多浏览器都不支持

当前支持：Safari 5、FF 3.6+、Opera 11、Chrome 8、IE 9

 

语法：

         text-shadow: x y blur color;

         如 text-shadow:2px  2px  5px  #EEEFFF;

以下是几种效果演示

1.1     简单效果

color:#7690CF;

text-shadow:2px 2px 2px #48577D

1.2      内雕刻效果

color: #666;

text-shadow: 0px 3px 0px #666;

1.3      发光效果

color:#FAF4E8;

text-shadow:0 0 20px #FFE30A;

1.4      模糊效果

color: transparent;

text-shadow: 0 0 10px #333;

1.5      混合效果

color:#F2B405;

text-shadow: 0 0 4px #F24405,

0 -5px 4px #F27405,

2px -10px 6px #F29F05,

-2px -15px 11px #F2E205,

2px -18px 18px #222601;

1.6      浮雕效果

color:#ccc;

text-shadow: -1px -1px #FFF,

1.7      边框围绕效果

color:#7FCAEB;

text-shadow: 0 -1px #00468C,

1px 0 #00468C,

0 1px #00468C,

1.8      3D效果

color:#F2B405;

text-shadow: 2px 2px #F27405,

3px 3px #F27405,

4px 4px #F27405,

5px 5px #F274051

2    使用网络字体@font-face

@font-face可以使用远程的字体（只要有授权的话），不需要本地安装支持。

语法

@font-face {

font-family: DeliciousRoman;

src: url('DeliciousRoman.eot'); //字体文件—for ie brs

src: url(DeliciousRoman.otf); //第二个字体文件---for other brs

}

3       使用RGBa定义颜色及不透明度

语法

Color:rgba(255,255,255,0.2)

例子

.box{     

    background: rgba(0, 0, 0, 0.2);

}

4       Transforms

可以修改html元素的外观

当前支持：Safari 5、FF 3.6+、Opera 11、Chrome 8、IE 9

4.1     Translate 位置

translate (x, y)

translatex(x)

translatey(y)

如translate (100px, -50px)//给原有的left+100px，原有的top-50px

例：（各浏览器）

-webkit-transform: translate(-150px, 75px);

-moz-transform: translate(-150px, 75px);

-o-transform: translate(-150px, 75px);

transform: translate(-150px, 75px);

4.2     Scale 大小

Scale(width,height)//改变宽和高

Scale(1.1)//按比例缩放

Scalex(1.1)//按比例缩放width

Scaley(1.1)//按比例缩放height

例：（各浏览器）

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);

4.3     Skew 方位（歪斜）

skew(x, y)//歪曲x，y的角度

skewx(x) == skewx(x,0)

skewy(y) == skewy(0,y)

例：（各浏览器）

 

-webkit-transform: skew(15deg,  5deg);

-moz-transform: skew(15deg,  5deg);

-o-transform: skew(15deg,  5deg);

transform: skew(15deg,  5deg);

4.4     Rotate 方位（旋转）

rotate(degrees)

例：（各浏览器）

-moz-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

-o-transform: rotate(10deg);

transform: rotate(10deg);

5       简洁、有格调的表单

HTML代码

<form id="contactform" class="rounded" method="post" action="">

<h3>Contact Form</h3>

  

<div class="field">

    <label for="name">Name:</label>

    <input type="text" class="input" name="name" id="name" />

    <p class="hint">Enter your name.</p>

</div>

  …  

<input type="submit" name="Submit"  class="button" value="Submit" />

</form>

 

CSS样式

#contactform {

      …//长宽等

  

    /* Border style */

    border: 1px solid #cccccc;

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    border-radius: 7px; 

  

    /* Border Shadow */

    -moz-box-shadow: 2px 2px 2px #cccccc;

    -webkit-box-shadow: 2px 2px 2px #cccccc;

    box-shadow: 2px 2px 2px #cccccc;

  

}

 

label { //对应<label>标签

    font-family: Arial, Verdana;

    text-shadow: 2px 2px 2px #ccc;

    display: block;

    float: left;

    font-weight: bold;

    margin-right:10px;

    text-align: right;

    width: 120px;

    line-height: 25px;

    font-size: 15px;

}

 

.input{

    font-family: Arial, Verdana;

    font-size: 15px;

    padding: 5px;

    border: 1px solid #b9bdc1;

    width: 300px;

    color: #797979;

}

 

.hint{ //提示信息

    display:none;

}

.field:hover .hint { //鼠标放上后的

    position: absolute;

    display: block;

    margin: -30px 0 0 455px;

    color: #FFFFFF;

    padding: 7px 10px;

    background: rgba(0, 0, 0, 0.6);

  

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    border-radius: 7px;

    }

6       Button按钮

基本样式

.button {

    font-family: sans-serif;

    font-weight:bold;

    color: #fff;

    padding:5px 10px 6px 10px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius:5px;

    cursor: pointer;

}

使用不同的颜色

.blue {

    background:#0085cc;

    background-image: -moz-linear-gradient(top,#0085cc,#00717f);

    background-image: -webkit-gradient(linear,left top,

left bottom,from(#0085cc),to(#00717f)   );

   }

.blue:hover{background:#00717f; }

 -à

7     径向渐变Radial Gradients

Mozilla 和Webkit 浏览器

语法

-moz-radial-gradient( [<position> || <angle>,]?

[<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

或

-webkit-radial-gradient([<position>], ?

[<shape> || <size>,]? <stop>, <stop>[, <stop>]*)

 

Position：开始的点，默认为center [可选]

Angle：开始的角度，默认0deg [可选]

 

Shape：渐变的角度 circle 或 eclipse（default）

Size：渐变的长度closest-side, closest-corner, farthest-side, farthest-corner

 

Stop：包含 color+停止点（可以是一个比例或者长度）[可选]

 

例子

代码	效果
background-image: -moz-radial-gradient(#BDDFB3, #167F39); background-image: -webkit-radial-gradient(#BDDFB3, #167F39);
background-image: -moz-radial-gradient(0% 50%, farthest-corner, green, yellow); background-image: -webkit-radial-gradient(0% 50%, farthest-corner, green, yellow);
background-image: -moz-radial-gradient(60% 70%, circle closest-side, #FFF5A5,#434EFF 70% ,#FFFFFF 100%); background-image: -webkit-radial-gradient(60% 70%,circle closest-side, #FFF5A5,#434EFF 70% ,#FFFFFF 100%);
background-image: -moz-radial-gradient(45px 45px 45deg, farthest-side, #ECDA52 0%, #290852 100%); background-image: -webkit-radial-gradient(45px 45px, farthest-side, #ECDA52 0%, #290852 100%);

 

 

8       线性渐变Linear Gradients

For Webkit( Safari, Chrome etc.) Browsers:

语法： -webkit-gradient(<type>, <starting point>, <ending point>,  <from color>, <to color> [, < to colour>]);

Type: The type of gradient, which can either be linear or radial.
Point: Each point is a pair of values, for example right center etc. The points can be defined in percentage as well.
Colors: Each color has following syntax: <color-stop> (value, color). The value can be either percentage (0 to 100%) or length (from 0 to 1).

 

For Mozilla Browsers:

语法:

1 2	-moz-linear-gradient([<position>] [<angle>], <starting color>, <to colour> [, <to colour>]);

Position: The position is used to define the starting point of the gradient. The value can be defined in pixels, or percentage or by position (left, center, right, top, bottom). If a position is not specified, the default value is used, which is center, or 50%.
Angle: We can define starting point of gradient by angle as well. For example, we can get vertical gradient with value of 90deg.
Color: Each color has following syntax: <color> (value). The value can be either percentage (0 to 100%) or length (from 0 to 1). If a color value is specified, the previous color will fade to that specified stop color at that stop point. If no value is specified, the color will fade out gradually from the start color to the end color.
The example use of -moz-linear-gradient:

例子

代码	效果
background: -webkit-gradient(linear, left top, left bottom, from(#408AD4), to(#00264C)); background: -moz-linear-gradient(top,  #408AD4,  #00264C); background:#408AD4;
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #FFFFA6), color-stop(50%, #BDF271), color-stop(100%, #01A2A6)); background: -moz-linear-gradient(top, #FFFFA6 0%, #BDF271 50%, #01A2A6 100%); background: #01A2A6;
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #FFF71A), color-stop(50%, #9CFF2C), color-stop(100%, #043100)); background: -moz-linear-gradient(left bottom 45deg, #FFF71A 0%, #9CFF2C 50%, #043100 100%); background: #043100;
background: -webkit-gradient(linear, right center, left center, color-stop(0%, #648C02), color-stop(50%, #FFD300), color-stop(100%, #FF7000)); background: -moz-linear-gradient(right top 180deg, #648C02 0%, #FFD300 50%, #FF7000 100%); background: #648C02;

 

9       圆角Rounded Corners

border-radius:10px;

例子

代码	效果
#box1{     /*General box properties*/     background-color:#7AE840;     width: 200px;     padding:10px;     margin:20px;     height:50px     /* using border-radius */     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px; }
#box2{     /*General box properties*/     background-color:#7AE840;     width: 200px;     padding:10px;     margin:20px;     height:50px     /* using border-radius */     -webkit-border-radius: 24px 0;     -moz-border-radius: 24px 0;     border-radius: 24px 0;     }
#box3{     /*General box properties*/     background-color:#7AE840;     width: 200px;     padding:10px;     margin:20px;     height:50px     /* using border-radius */     -webkit-border-radius: 0 24px;     -moz-border-radius: 0 24px;     border-radius: 0 24px;     }
#box4{     /*General box properties*/     background-color:#7AE840;     width: 200px;     padding:10px;     margin:20px;     height:50px     /* using border-radius */     -webkit-border-radius:  5px 20px 40px 60px;     -moz-border-radius:  5px 20px 40px 60px;     border-radius:  5px 20px 40px 60px;     }