css3中通学

来源：互联网发布：郑州经开区网络维修编辑：程序博客网时间：2024/06/11 18:06

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>

0 0

css3中通学

css3的特性

多列布局

多背景图

字符串溢出

形变

结构伪类选择器

UI伪类选择器

多色边框

边框背景

圆角

设计背景

2D变形

动画

transition动画 ，设定开始和结束的点

transition-property : 定义过渡属性

transition-duration 定义过渡时间

transition-delay 定义过渡延迟时间

transition-timing-function 过渡效果

animations动画，设定多个关键帧

渐变

webkit渐变

Gecko渐变 (火狐)

线性渐变 -moz-linear-gradient([<point>|<angle>,]<stop>,<stop>)

设计IE渐变 （7~9）

网页布局

多列布局，一般适用于报纸类型的排版

盒布局

改变盒模型的组成方式

调节元素尺寸

设计轮廓

设计导航的顺序

定义方向键控制顺序

设计倒影

transition动画，设定开始和结束的点

设计IE渐变（7~9）