(图片上传太麻烦,可以直接下载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%);
|
|
|
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 |
|
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
:
例子
代码 |
效果 |
|
|
|
|
|
|
|
|
|
|
|
|
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; }
|
|
|
|
|
|
推荐阅读
代码之余轻松一下:当前热门-人民的名义
相关推荐
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
div+css布局。实例制作便于学习或者教学
不错的div+css学习实例,有大量的实例展示,企业网站,电子商务网站等,本案例只可作为学习,不可用作商业。
网页学习的绝佳资料。关于CSS布局的实例教程。包含全部代码。
学习CSS制作网站的初学者可以研究一下,相信会对你有所帮助的。
CSS禅意花园,学习css的超级精典实例...这里有一百多个国内外顶级css高手的实例..
本书自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了 文本、图像、链接、列表...
CSS教程实例大全是学习css的好参考 很多实例在里面
个人学习css3例子与笔记,包含基础部分与关键布局,阴影效果,动画效果,鼠标移过内容上浮效果,纯css画三角形圆形等例子与总结
CSS实例,20章教程;20个DIV+CSS的实例,详细介绍了css布局,学习DIV+CSS的初级良好教程
几个漂亮网站首页的源码(全),学习css和自己设计网页的一大助力。
400实例html+css 学习手册可以帮助学习css 做出漂亮的网页
使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。
这是学习css最好的方法 实例源码 一看就懂 1天就可完全掌握 css
jquery css 学习实例 公司网站内部源代码
css欣赏很多css实例和代码是学习css的好东西
CSS 特效、实例、供大家学习。 应大家要求,把下载资源分由5分改为0分!
html5教程和css3学习以及html5和css3的学习实例