8.12 CSS知识点5

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

背景原点 background-origin

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

语法：

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

例子：

背景的显示区域 background-clip

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

语法：

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

例子：

背景尺寸 background-size

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

语法：

例：

背景样式缩 background

背景样式多个属性的缩写

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

例：

缩写后：

多重背景

是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

例：

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

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

语法：

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

例：

变形样式 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中创建简单的过渡效果可以从以下几个步骤来实现：

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

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

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

例：

transition-duration

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

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 之间的数值。(动画速度自定义)

例：

transition-delay

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

例：

transition

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

语法：

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

例：