css3实验、生成、学习网站
查询前缀和兼容性
http://caniuse.com/
1、文本阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 文本效果</title>
<style>
body
{
font-size:50px;
text-shadow: 5px 5px 1px rgba(0,0,0,.7);
}
</style>
</head>
<body>
Hello World!
</body>
</html>
2、文本溢出
http://www.cnblogs.com/CyLee/p/5333518.html
3、生成渐变的背景图片.必须加上厂商前缀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 渐变效果</title>
<style>
div
{
width: 500px;
height: 200px;
color:#fff;
/*background-image: linear-gradient(to left top ,yellow,black);*/
/*background-image: linear-gradient(45deg,yellow,black);*/
/*background-image: linear-gradient(-45deg,yellow,black);*/
/*background-image: repeating-linear-gradient(rgba(0,0,0,1) 10px,rgba(255,255,255,1) 30px);*/
background-image: linear-gradient(-45deg ,yellow 0%,black,blue,rgba(255,255,255,1) 100%);
}
</style>
</head>
<body>
<div>黑色从左上到右下渐变,可以设置top,right,bottom,left。还可以设置0~360deg（度）.还可以书写N个颜色，颜色可以分配占比重（%或者Px）、默认从开头为0%、结尾100%，中间如果不设置会自动计算。
并且这些颜色还可以使用rgba来实现强大的层次感。还可以使用repeating实现重复背景类似百叶窗的效果
</div>
</body>
</html>
4、变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 渐变效果</title>
<style>
div
{
width: 500px; height: 200px; color:#fff; background: green;
/*transform:translate(100px,200px);*/
/*transform:scale(1.5,0.5);*/
/*transform:rotate(4deg);*/
/*transform:skew(4deg,10deg);*/
transform:translate(200px,100px) rotate(4deg) scale(1.5) skew(4deg,4deg);
}
</style>
</head>
<body>
<div>
transform对应几个函数：
1、translate（x,y） 平移
2、scale（x,y） 对x轴和y轴进行倍数扩大或者缩小
3、rotate(deg) 以中心为轴旋转n角度，比较常用的效果
5、skew(xdeg,ydeg) 倾斜，有点立体感，类似投影仪
以上功能都可以通过空一格组合使用，如
</div>
</body>
</html>
5、基准点（对上面transform的扩展）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 渐变效果</title>
<style>
div
{
width: 200px; height: 200px; color:#fff; background: green;
transform: translate(150px,100px) rotate(45deg);
transform-origin: 0px 0px;
/*transform-origin: left top;*/
}
</style>
</head>
<body>
<div>
transform-origin
可以设置transform的基准点，可以设置px,%,还有位置
</div>
</body>
</html>