8.12 CSS知识点5

背景原点 background-origin

设置元素背景图片的原始起始位置，必须保证背景是background-repeat为no-repeat此属性才会生效。

语法：

background-origin：border-box | padding-box | content-box；

例子：

.img{
    width: 400px;
    height: 250px;
    padding :50px;
    background-image: url(01.jpg);
    background-repeat: no-repeat;
    border: 10px dashed #ccc;
    background-origin: content-box;
    background-position: center center;
}

背景的显示区域 background-clip

设定背景图像向外裁剪的区域

语法：

background-clip：border-box | padding-box | content-box | text

例子：

.img{
    width: 300px;
    height: 100px;
    padding :50px;
    background-image: url(01.jpg);
    background-repeat: no-repeat;
    border: 10px dashed #ccc;
    background-clip: content-box;
    background-position: center center;
}

背景尺寸 background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

值	描述
auto	默认值，不改变背景图片的原始高度和宽度。
<长度值>	成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放。
<百分比>	0%~100%之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上。
cover	可选。阴影的尺顾名思义为覆盖，即将背景图片等比缩放以填满整个容器寸。
contain	可选。阴影的颜色。将背景图片等比缩放至某一边紧贴容器边缘为止色值。

例：

div{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

背景样式缩 background

背景样式多个属性的缩写

background：背景色 背景图片 背景平铺方式 背景定位

例：

body {
    background-color:# EDEDED;
    background-image:url(images/bg.png);
    background-repeat:no-repeat;
    background-position:50%  30px;
}

缩写后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

多重背景

是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加

语法：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

注意：

用逗号隔开每组background的缩写值；

如果有size值，需要紧跟position并且用“/”隔开；

如果有多个背景图片，而其他属性只有一个，表明所有背景图片应用改属性值；

background-color只能设置一个。

列表样式

项目符号 list-style-type

控制列表每一项的头部图标

说明：

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

例：

/*实心圆*/
ul { list-style-type:disc;}
/*空心圆*/
ul { list-style-type:circle;}
/*实心方块*/
ul { list-style-type:square;}
/*不显示项目符号*/
ul { list-style-type:none;}
/*阿拉伯数字*/
ol { list-style-type:decimal;}
/*小写罗马数字*/
ol { list-style-type:lower-roman;}
/*大写英文字母*/
ol { list-style-type:upper-alpha;}        

自定义项目符号 list-style-image

用图片来定义列表的每一项的头部图标

语法：

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

变形样式 transform

改变元素的大小、透明、旋转角度、扭曲度等。

语法：

transform：none | <transform-function>

transform-function包含以下几个方法：

translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。

translateX()： 指定对象X轴（水平方向）的平移

translateY()： 指定对象Y轴（垂直方向）的平移

rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义

scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

过渡动画

transition-property

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；

第二，声明过渡元素最终状态样式，比如悬浮状态；

第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

例：

div{
    -webkit-transition-property:width,height,color;
    transition-property:width,height,color;
}

transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
例：

div{
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

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.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)

例：

div{
     -webkit-transition-timing-function:ease-in;
    transition-timing-function:ease-in;
}

transition-delay

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

例：

div  {
    -webkit-transition-delay:.1s;
    transition-delay:.1s;
}

transition

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

语法：

transition：[ none | <transition-property> ] || < transition-duration > || <transition-timing-function> || < transition-delay> [,*]

例：

div{
    -webkit-transition: all .5s ease-in .1s;
    transition: all .5s ease-in .1s;
}