CSS3的基本内容

CSS的基本内容

CSS 用于控制网页的样式和布局.
CSS3 是最新的 CSS 标准.
CSS3 边框（Borders）

• border-radius css3圆角

 div
{
     
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}

• box-shadow css3盒阴影

 div
{
     
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

• border-image css3图像创建边框

#stretch
{
     
	-webkit-border-image:url(border.png) 30 30 stretch; 
	-o-border-image:url(border.png) 30 30 stretch; 
	border-image:url(border.png) 30 30 stretch;
}

< div id="stretch">图像

CSS3 背景

• background-size 规定背景图片的尺寸
• background-origin 规定背景图片的定位区域
• background-clip 规定背景的绘制区域

CSS3 渐变（Gradients）
1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2.径向渐变（Radial Gradients）- 由它们的中心定义
CSS3 文本效果

• text-shadow 文本阴影

h1
{
     
   text-shadow: 5px 5px 5px #FF0000;
}

• word-wrap 单词换行
  word-break 控制单词
  keep-all 完整单词换行
  break-all 不完整单词换行 阶段换行

单行溢出省略：
white-space：nowrap;
text-overflow:ellipsis;
overflow:hidden;

CSS3 字体
CSS3 @font-face 规则
CSS3 2D 转换
transform适用于2d,3d转换的元素

• translate() 平移
  translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
  translateX(n) 定义 2D 转换，沿着 X 轴移动元素
  translateY(n) 定义 2D 转换，沿着 Y 轴移动元素

• rotate() 旋转
  rotate(angle) 定义 2D 旋转，在参数中规定角度

• scale() 缩放
  scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度
  scaleY(n) 定义 2D 缩放转换，改变元素的高度

• skew() 倾斜
  skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴
  skewX(angle) 定义 2D 倾斜转换，沿着 X 轴
  skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴
  CSS3 3D 转换
  转换属性：

• transform-origin 改变转换元素位置

• transform-style 被嵌套元素如何在 3D 空间中显示

• perspective 3D 元素的透视效果

• perspective-origin 3D 元素的底部位置
  3D转换方法

• 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 转换元素的透视视图

CSS3 过渡
添加某种效果可以从一种样式转变到另一个

• transiton
  简写属性，用于在一个属性中设置四个过渡属
• transition-property
  规定应用过渡的 CSS属性的名称
• transition-duration
  定义过渡效果花费的时间,默认是0
• transition-timing-function
  规定过渡效果的时间曲线,默认是 "ease "
• transition-delay
  规定过渡延迟时间,默认值是0

鼠标移动到div元素上，红色块长度由100px变为300px
div
{
     
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; 
}

div:hover
{
     
	width:300px;
}

CSS3 动画
动画是使元素从一种样式逐渐变化为另一种样式的效果

• @keyframes 规定动画
• animation
  所有动画属性的简写属性，除了 animation-play-state 属性
• animation-name
  规定 @keyframes 动画的名称
• animation-duration
  规定动画完成一个周期所花费的秒或毫秒，默认是 0
• animation-timing-function
  规定动画的速度曲线，默认是 “ease”
• animation-delay
  规定动画何时开始，默认是 0
• animation-iteration-count
  规定动画被播放的次数,默认是 1
• animation-direction
  规定动画是否在下一周期逆向地播放，默认是 “normal”
• animation-play-state
  规定动画是否正在运行或暂停,默认是 "running
  用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%.
  0% 是动画的开始，100% 是动画的完成.
  为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器.

进行颜色的变化，当动画完成时，会变回初始的样式
div
{
     
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; 
	-webkit-animation:myfirst 5s; 
	-o-animation:myfirst 5s; 
}

@keyframes myfirst
{
     
	0%   {
     background:red;}
	25%  {
     background:yellow;}
	50%  {
     background:blue;}
	100% {
     background:green;}
}

@-moz-keyframes myfirst 
{
     
	0%   {
     background:red;}
	25%  {
     background:yellow;}
	50%  {
     background:blue;}
	100% {
     background:green;}
}

@-webkit-keyframes myfirst 
	0%   {
     background:red;}
	25%  {
     background:yellow;}
	50%  {
     background:blue;}
	100% {
     background:green;}
}

@-o-keyframes myfirst 
{
     
	0%   {
     background:red;}
	25%  {
     background:yellow;}
	50%  {
     background:blue;}
	100% {
     background:green;}
}