css3新学习样式

CSS3
1、旋转角度：
transform:rotate(30deg);//旋转30度

2、圆角边框（由小到大）：
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */  

3、边框阴影（box-shadow）：
box-shadow: 10px 10px 5px #888888;/*宽、长、透明度、颜色*/

4、边框图片（border-image）：
border-image:url(border.png) 30 30 round;
border:15px solid transparent;/*图片拉伸*/

5、 文本阴影（text-shadow）：
text-shadow: 5px 5px 5px #FF0000;/*水平阴影、垂直阴影、模糊距离，以及阴影的颜色*/

6、自动换行（word-wrap 会对单词进行拆分）：
word-wrap:break-word;

7、2D 转换：
（旋转角度）transform:rotate(30deg);//元素顺时针旋转 30 度
（位置移动）transform: translate(50px,100px);//元素从左侧移动 50 像素，从顶端移动 100 像素
（增缩比例）transform: scale(2,4);//宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
（翻转角度）transform: skew(30deg,20deg);//围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
（2D 转换方法组合）transform:matrix(0.866,0.5,-0.5,0.866,0,0);//旋转、缩放、移动以及倾斜元素

8、3D 转换：
transform: rotateX(120deg);//元素围绕其 X 轴以给定的度数进行旋转
transform: rotateY(130deg);//

9、过滤效果（变换图形）：
transition: width 1s;
transition: width 1s linear 2s;//linear 速度均匀，延迟2s开始
div:hover{width:300px;}

10、动画（@keyframes）：
animation:myfirst 5s;//myfirst设置动画名
@keyframes myfirst
{
from {background:red;}
to {background:black;}
}
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}


10、同行并排显示div盒子，均匀隔开

        

新建预约

        

预约历史

        

秀发日历