css3笔记

资料：http://www.runoob.com/css3/css3-tutorial.html

边框：

<!--圆角-->
<!DOCTYPE html>
<html>
<style>
div{
border:2px solid #a1a1a1;
padding:10px 40px;
background-color:#dddddd;
width:300px;
border-radius:25px;
}
</style>
<body>
<div>border-radius 属性允许你为元素添加圆角边框</div>
</body>
</html>

<!--盒阴影-->
<!DOCTYPE html>
<html>
<style>
div{
height:100px;
width:300px;
background-color:yellow;
box-shadow:10px 10px 5px #888888;
}
</style>
<body>
<div>border-radius 属性允许你为元素添加圆角边框</div>
</body>
</html>

<!--边界图片-->
<!DOCTYPE html>
<html>
<style>
div{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}

#round
{
border-image:url(image/border.png) 30 30 round;
}

#stretch
{
border-image:url(image/border.png) 30 30 stretch;
}
</style>
<body>
<div id="round">事实上是。。。。</div>
<div id="stretch">事实上是。。。。</div>
<img src="image/border.png">
</body>
</html>

View Code

多个背景图片：

<!--多个背景图片-->
<!DOCTYPE html>
<html>
<style>
body{
background-image:url(image/1.jpg),url(image/2.jpg);
}
</style>
<body>

</body>
</html>

View Code

渐变：

<!---->
<!DOCTYPE html>
<html>
<style>
#grad{
height:200px;
background:linear-gradient(to bottom right,red,blue);
}
</style>
<body>
<div id="grad"></div>
</body>
</html>

View Code

2d转换：

<!---->
<!DOCTYPE html>
<html>
<style>
div.one
{
width:200px;
height:100px;
background-color:red;
border:1px solid black;
transform:skew(30deg,20deg);
}
</style>
<body>
<div class="one"></div>
</body>
</html>

View Code

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3d转换：

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

过渡：

<!DOCTYPE html>
<html>
<head>
<style>
img
{
width:100px;
height:100px;

transition:width 2s,height 2s,transform 2s;
}
img:hover
{
width:300px;
height:200px;
transform:rotate(180deg);
}
</style>
</head>

<body>
<div>
<img src="image/1.jpg" width="150" height="200">
</div>
</body>
</html>

View Code

动画：

<!--要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。-->
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;<!--动画从头到尾的速度是相同的。-->
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;<!--无限次播放-->
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@-webkit-keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

多列：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
.newspaper
{
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule:3px outset #ff00ff;
}
</style>
</head>
<body>
<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
</html>

View Code

图形界面：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
.newspaper
{
border: 2px solid black;
padding:5px 5px;
width:500px;
box-sizing:border-box;
outline:2px solid red;
outline-offset:15px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
</html>

View Code