实例学习 CSS3-1
CSS2就已经有提出了，只是当时很多浏览器都不支持
当前支持：Safari 5、FF 3.6+、Opera 11、Chrome 8、IE 9
?
语法：
???????? text-shadow: x y blur color;
???????? 如 text-shadow:2px? 2px? 5px? #EEEFFF;
以下是几种效果演示
color:#7690CF;
text-shadow:2px 2px 2px #48577D
color: #666;
text-shadow: 0px 3px 0px #666;
color:#FAF4E8;
text-shadow:0 0 20px #FFE30A;
color: transparent;
text-shadow: 0 0 10px #333;
color:#F2B405;
text-shadow: 0 0 4px #F24405,
0 -5px 4px #F27405,
2px -10px 6px #F29F05,
-2px -15px 11px #F2E205,
2px -18px 18px #222601;
color:#ccc;
text-shadow: -1px -1px #FFF,
color:#7FCAEB;
text-shadow: 0 -1px #00468C,
1px 0 #00468C,
0 1px #00468C,
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
}
语法
Color:rgba(255,255,255,0.2)
例子
.box{ ????
????background: rgba(0, 0, 0, 0.2);
}
可以修改html元素的外观
当前支持：Safari 5、FF 3.6+、Opera 11、Chrome 8、IE 9
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);
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);
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);
rotate(degrees)
例：（各浏览器）
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
HTML代码
<form id="contactform" style="margin: 0cm 0cm 0pt;"><h3>Contact Form</h3>
??
<div style="margin: 0cm 0cm 0pt;">????<label for="name">Name:</label>
????<input type="text" style="margin: 0cm 0cm 0pt;">????<p style="margin: 0cm 0cm 0pt;"></div>
??…??
<input type="submit" name="Submit"? style="margin: 0cm 0cm 0pt;"></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;
????}
基本样式
.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; }
?-à
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%);
?
?
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;
?
?
?
?
?
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;
????}
?
?
?
?
?
?