css3的特性
多列布局
- column-count:栏目数
- column-gap:栏目见的空白
- column-rule
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
.text-list {
width: 500px;
height: 460px;
border:solid 1px #CCCCCC;
padding-top: 15px;
background: #fff;
box-shadow: 5px 5px 6px #000;
}
.text-list li { line-height: 28px; }
.ul-one { -webkit-transform: rotate(5deg); }
/* 针对ul设置 则整体都会有所倾斜 */
.one { -webkit-transform: rotate(5deg) scale(1.00, 1.50); }
/* 设置倾斜 和缩放*/
.two a { -webkit-transform: rotate(3deg); } /*设置li的倾斜*/
.three { -webkit-transform: rotate(1deg); }
.three span {
color: #f00;
-webkit-transform: rotate(-5deg);
}
/*内联元素的倾斜度*/
.four a { -webkit-transform: skew(7deg, 8deg); }
.p-con {
font-weight: bold;
color: #f00;
-webkit-transform: rotate(15deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px, -2px);
-webkit-transform-origin: 0 5px;
}
</style>
</head>
<body>
<div class="text-list">
<ul class="ul-one">
<li>li的列表</li>
<li><a href="#">缩放大小比例</a></li>
<li><a href="#">旋转角度</a><span>缩放大小比例</span></li>
<li><a href="#"><span>倾斜比例</span></a></li>
</ul>
<ul>
<li class="one">设置字体的倾斜度 rotate(5deg) 和 缩放比例 scale(1.00, 1.50); </li>
<li class="two"><a href="#">倾斜度</a></li>
<li class="three"><a href="#">这个外层元素已经设倾斜了</a><span>对span有设置了倾斜 两者没有影响</span></li>
<li class="four"><a href="#">字体的斜切变换</a></li>
</ul>
<p class="p-con">transform 的各个属性的用法</p>
</div>
</body>
</html>
多背景图
- background
border: 5px solid #9e9aab;
background: url(images/a.jpg) top left no-repeat, url(images/b.jpg) bottom left no-repeat, url(images/c.jpg) top right repeat-y, url(images/d.jpg) bottom right repeat-x;
字符串溢出
- 中英文都适用的截断单词:word-wrap: break-word;
- 针对于长串的英文的单词截断:word-break: break-all;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
/*定义break-word值的字符串溢出样式*/
.c2 {
width: 300px;
word-wrap: break-word;
border: 1px solid #F00;
}
/*定义break-word值和break-all值的字符串溢出样式*/
.c3 {
width: 300px;
word-wrap: break-word;
word-break: break-all;
border: 1px solid #F90;
}
</style>
</head>
<body>
<div class=c2>This is all English. This is all English. This is all English.</div>
<div class=c2>全是中文的情况。全是中文的情况。全是中文的情况。</div>
<div class=c3>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</div>
</body>
</html>
形变
- transform:none|matrix(a,b,c,d,e,f)|translate(tx,ty)|translateX(tx),translateY(ty)|scale(sx,sy)|scaleX(sx)|scaleY(sy)|rotate(angle)|skewX(angle)|skewY(angle)|scale(angle,angle);
结构伪类选择器
- odd 奇数,even 偶数
UI伪类选择器
- :enable
- :disable
- :checked
- :hover
- :active
- :focus
- :read-only
- read-write
- default
多色边框
- border-top-color
- border-bottom-color
- border-left-color
- border-right-color
- 注意该属性不能直接写在border-color中
border-bottom-colors:#100 #200 #300 #400 #500 #600 #700 #800 #900 #a00;
边框背景
建议写出border-style:的属性值,否则容易出现兼容性。
- border-image:none|img
- border-top-image: 顶部背景图像
- border-right-image
- border-bottom-image
- border-left-image
- border-top-left-image:定义左上角边框背景图像
- border-top-right-image
- border-bottom-left-image
- border-bottom-right-image
- border-image-source
- border-image-slice
- border-images-width
- border-images-outset :定义边框背景图像偏移位置
- 注意borer-image-slice(a,b,c,d),a,b,c,d的顺序是上,右,下,左
- 当参数值都>= 背景图像宽度,那么背景图像被缩放填充到4个角中
- 当参数值中的一对(1,3或者2,4值的和 >= 背景图像的尺寸,而另一对值之和=背景图像的宽或者高,则背景图像被分成两半,按顺序放在四个角中
- 如果其中的一对值等于图像的宽或者高,背景图像被切为4部分,按顺序放在四个角中
- border-image-repeat:stretch(拉伸,默认)|repeat|round(平铺)
圆角
- border-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius
- 两个参数,第一个值为水平半径,第二个为垂直半径,中间用/隔开
- 或者 a,b,c,d
设计背景
- background-origin:border|padding|content ,定义背景图像的显示位置,content指得是内容区域
- background-clip:boder|padding|content|no-clip,定义背景的裁切区域
- background-size:len|per|auto|contain,其中cover是保持图像背身的宽高比,将图像缩放正好完全覆盖背景区域;contain,将图像保持正好的宽高比,将图像缩放到适应背景区域。
- border-break(-moz-background-inline-policy):bounding-box|each-box|continouus,bounding-box背景图像在整个内联元素进行平铺,each-box图像在每一行中进行平铺
- 可以定义多背景图像
2D变形
- transform:none|fun|[fun]
- fun包含如下
- rotate(angle) :旋转图像
- scale(num,num) :num可取正数,负数,小数,注意取负数会翻转图像
- translate(value,value):移动
- skew(angle,[angle]):倾斜
- matrix(a,b,c,d,e,f) :矩形变换
- transform-origin: 改变中心点,默认为对象的中心
动画
transition动画 ,设定开始和结束的点
- transition:['transition-property']|['transition-duration']|['transition-timing-function']|['transition-delay']|['transition-property']|['transition-duration']|['trannsition-timing-function']|['transition-delay']
transition-property : 定义过渡属性
- 初始值为all,适用于所有属性和:before 和 :after
- 多个之间用 , 隔开
transition-duration 定义过渡时间
- 定义: 从老属性到新属性的时间
transition-delay 定义过渡延迟时间
- 取值 整数,负整数和0 ,非零的必须设置秒还是毫秒,负数的时候会把之前的动作截断,从该时间点开始显示,为整数的时候,过渡的动作会被延迟
transition-timing-function 过渡效果
- ease : 缓解效果,cubic-bezier(0.25,0.1,0.25,1)
- linear:线性效果,cubic-bezier(0,0,1,1)
- ease-in:渐显效果,cubic-bezier(0.42,0,1,1)
- ease-out:渐隐效果,cubic-bezier(0,0,0.58,1)
- ease-in-out: 渐隐渐显效果,cubic-bezier(0.42,0,0.58,1)
- cubic-bezier :特殊的立方贝塞尔曲线效果
animations动画,设定多个关键帧
- animation: [animation-name]|[animation-duration]|[animation-timingfunction]|[animation-delay]|[animation-count]|[animation-direction]
- 多个动画之间用 , 隔开
- animation-name : 适用于块元素和内联元素
- animation-time : 动画播放时间
- animation-timing-funcitoin :linear|ease-in|ease-out|ease-in-out|cubicbezier(a,b,c,d,e,f)
- animation-delay
- animation-iteration-count :num|infinite(无限循环),默认值为1,如果为负值的话,反向播放
- animation-direction : alternate(表示偶数次向前,奇数次反向)|normal (每次循环都向前)
渐变
- 分别基于webkit和Gecko(谷歌),Presto(oper)和基于trident(ie)的三个方面
- 渐变分为线性和径向渐变
webkit渐变
- -webkit-gradient(<type>,<point>[,<radius>],<point>[,<radius>] [,stop])
- type :定义渐变类型,包括线性渐变(linear) 和 径向渐变 (radial)
- point :渐变的起始坐标和结束坐标
- radius :当定义径向渐变的时候,用来设置径向渐变的长度
- stop:: 定义渐变色和步长。from(cv) to(cv) color-stop(0~1 或者 0%~100%)
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));
Gecko渐变 (火狐)
线性渐变 -moz-linear-gradient([<point>|<angle>,]<stop>,<stop>)
- angle: 定义直线渐变角度,0的时候从左向右,90的时候从底向上
background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));
设计IE渐变 (7~9)
- filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
- enabled :监测滤镜是否激活,默认为true
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999FF, endColorStr=#ffffff);
网页布局
多列布局适用于文章,且每列是均分的;盒模型适合网页结构
多列布局,一般适用于报纸类型的排版
- columns:column-width|column-count
- column-gap:normal|lenght ,一般默认为1em
- column-rule:length|style|color
- column-span :1|all,默认为1,表示只在本栏中显示;all跨所列
- column-fill :atuo|balance ,auto表示岁内容的变化而变化;balance表示会根据内容最多的那一列的高度而进行统一
盒布局
- 和float布局以及positon布局并列的盒布局,并且引入新的弹性盒布局,使用该模型,可以轻松的创建自适应浏览器窗口的流动布局和自适应文字大小的弹性布局。
- 开启:display:box|inline-box
- 优点:解决了底部对不齐的问题
- 开启弹性:box-flex:1,计算的公式:子盒子的大小等于父盒子大小*其box-flex在所有子盒子box-flex总和中百分比
- 定义列显示顺序: box-ordinal-groupp
- 定义列排列方向: box-orient:vertical|horizontal ,当定义为水平方向时,元素的宽度为元素中内容的宽度,高度自动变为容器的高度;当排列的方向指定为垂直方向时,高度为内容高度,宽度为容器的宽度。
- box-align 和 box-pack :start|center|end 定义对齐方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
#container {
display: -moz-box;
display: -webkit-box;
border: solid 1px red;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 800px;
height: 400px;
}
#text-a {
background-color: orange;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-b {
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c { background-color: limegreen; }
#text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">列1</div>
<div id="text-b">列2</div>
<div id="text-c">列3</div>
</div>
</body>
</html>
改变盒模型的组成方式
- box-sizing:content-box | border-box | inherit
- content-box : width/height=border+padding+content
- border-box: width/height=content
调节元素尺寸
- resize:none|both|horizontal|vertical|inherit
- both:宽高都可以调节
- horizontal:宽可调节
- vertical: 高可调节
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#resize {
background:url(images/img10.jpg) no-repeat center;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;
width:200px;
height:120px;
max-width:800px;
max-height:600px;
padding:6px;
border: 1px solid red;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div id="resize"></div>
</body>
</html>
设计轮廓
- outline: outline-color|outline-style|outline-width|outline-offset
- outline-width:thin(细轮廓)|medium(中轮廓)|thick(粗轮廓)|len
设计导航的顺序
- 以前的导航顺序,是在html中定义tabindex,现在nav-index 定义顺序
input.nav1 { nav-index:1; }
input.nav2 { nav-index:2; }
input.nav3 { nav-index:3; }
input.nav4 { nav-index:4; }
input.nav5 { nav-index:5; }
定义方向键控制顺序
- nav-up,nav-right,nav-down,nav-left :auto|id|current|root|target-name
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { background:url(images/img9.jpg) center no-repeat; }
button { position:absolute; }
button#b1 {
top:0;
left:50%;
nav-index:1;
nav-right:#b2;
nav-left:#b4;
nav-down:#b2;
nav-up:#b4;
}
button#b2 {
top:50%;
left:100%;
nav-index:2;
nav-right:#b3;
nav-left:#b1;
nav-down:#b3;
nav-up:#b1;
}
button#b3 {
top:100%;
left:50%;
nav-index:3;
nav-right:#b4;
nav-left:#b2;
nav-down:#b4;
nav-up:#b2;
}
button#b4 {
top:50%;
left:0;
nav-index:4;
nav-right:#b1;
nav-left:#b3;
nav-down:#b1;
nav-up:#b3;
}
</style>
</head>
<body>
<div>
<button id="b1">顶部</button>
<button id="b2">右侧</button>
<button id="b3">底部</button>
<button id="b4">左侧</button>
</div>
</body>
</html>
设计倒影
- -webkit-box-reflect: direction|offset|max-box-image
- direction:above|below|left|right
- max-box-image:定义遮盖图像
- 可以对img,文字,视频
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
</head>
<body>
<img src="images/bg1.jpg" />
</body>
</html>