实例学习 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:2px2px2px#48577D

 

1.2      内雕刻效果

color: #666;

text-shadow: 0px3px0px#666;

 

1.3      发光效果

color:#FAF4E8;

text-shadow:0020px#FFE30A;

 

1.4      模糊效果

color: transparent;

text-shadow: 0010px#333;

 

1.5      混合效果

color:#F2B405;

text-shadow: 004px#F24405,

0-5px4px#F27405,

2px-10px6px#F29F05,

-2px-15px11px#F2E205,

2px-18px18px#222601;

 

1.6      浮雕效果

color:#ccc;

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

 

1.7      边框围绕效果

color:#7FCAEB;

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

1px0#00468C,

01px#00468C,

 

1.8      3D效果

color:#F2B405;

text-shadow: 2px2px#F27405,

3px3px#F27405,

4px4px#F27405,

5px5px#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代码

<formid="contactform"class="rounded"method="post"action="">

<h3>Contact Form</h3>

  

<divclass="field">

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

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

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

</div>

  …  

<inputtype="submit"name="Submit"  class="button"value="Submit"/>

</form>

 

CSS样式

#contactform {

      …//长宽等

  

    /* Border style */

    border: 1pxsolid#cccccc;

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    border-radius: 7px; 

  

    /* Border Shadow */

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

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

    box-shadow: 2px2px2px#cccccc;

  

}

 

label { //对应<label>标签

    font-family: Arial, Verdana;

    text-shadow: 2px2px2px#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: 1pxsolid#b9bdc1;

    width: 300px;

    color: #797979;

}

 

.hint{ //提示信息

    display:none;

}

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

    position: absolute;

    display: block;

    margin: -30px00455px;

    color: #FFFFFF;

    padding: 7px10px;

    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:5px10px6px10px;

    -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,lefttop,

leftbottom,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%, circleclosest-side, #FFF5A5,#434EFF70%,#FFFFFF100%); background-image: -webkit-radial-gradient(60%70%,circle closest-side, #FFF5A5,#434EFF70%,#FFFFFF100%);
background-image: -moz-radial-gradient(45px45px45deg, farthest-side, #ECDA520%, #290852100%); background-image: -webkit-radial-gradient(45px45px, farthest-side, #ECDA520%, #290852100%);

 

 

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, lefttop, leftbottom, from(#408AD4), to(#00264C)); background: -moz-linear-gradient(top,  #408AD4,  #00264C); background:#408AD4;
background: -webkit-gradient(linear, centertop, centerbottom, color-stop(0%, #FFFFA6), color-stop(50%, #BDF271), color-stop(100%, #01A2A6)); background: -moz-linear-gradient(top, #FFFFA60%, #BDF27150%, #01A2A6100%); background: #01A2A6;
background: -webkit-gradient(linear, leftbottom, righttop, color-stop(0%, #FFF71A), color-stop(50%, #9CFF2C), color-stop(100%, #043100)); background: -moz-linear-gradient(leftbottom45deg, #FFF71A0%, #9CFF2C50%, #043100100%); background: #043100;
background: -webkit-gradient(linear, rightcenter, leftcenter, color-stop(0%, #648C02), color-stop(50%, #FFD300), color-stop(100%, #FF7000)); background: -moz-linear-gradient(righttop180deg, #648C020%, #FFD30050%, #FF7000100%); 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: 24px0;     -moz-border-radius: 24px0;     border-radius: 24px0;     }
#box3{     /*General box properties*/     background-color:#7AE840;     width: 200px;     padding:10px;     margin:20px;     height:50px     /* using border-radius */     -webkit-border-radius: 024px;     -moz-border-radius: 024px;     border-radius: 024px;     }
#box4{     /*General box properties*/     background-color:#7AE840;     width: 200px;     padding:10px;     margin:20px;     height:50px     /* using border-radius */     -webkit-border-radius:  5px20px40px60px;     -moz-border-radius:  5px20px40px60px;     border-radius:  5px20px40px60px;     }

 

 

 

推荐阅读

 

代码之余轻松一下：当前热门-人民的名义

 

 

JAVAEE容器如何管理EntityManager和PersistenceContext