Web前端技术HTML5+CSS3+响应式设计 课件 8-css3新增属性

Web前端技术（HTML5+CSS3+响应式设计）第8章CSS3的新增属性问题的导入CSS3是CSS2的升级版本，也是一个新标准，它增加了很多强大的新功能，比如说圆角、阴影、动画、变形等，通过这些属性的设置，可以减少图片的使用，在不使用javaScript情况下，也能实现交互的效果。导入问题教学内容渐变gradient和过渡transition边框圆角border-radius盒子阴影box-shadow变形transfrom分列布局columns动画animations8.1分列布局1、Column-count语法：column-count：列数；

2、Column-width：Column-width：每列宽度，

Columns：复合属性，可以设置宽度和列数。3.column-gap：<length>|normal

设置或检索对象的列与列之间的间隙

如：column-gap:normal;column-gap:40px;4.column-rule：[column-rule-width]||[column-rule-style]||[column-rule-color]设置或检索对象的列与列之间的边框。复合属性。相当于border属性5.column-span：none|all

设置或检索对象元素是否横跨所有列。

说明：edge、chrome50、ie10以上都支持多列属性。InternetExplorer9以及更早的版本不支持多列属性。部分版本需要加指定浏览器的前缀：chrome、safari、opear为-webkit-，firefox为-moz-。8.2文字阴影text-shadow给文字设置阴影，减少图片的使用语法格式：text-shadow:X轴偏移量Y轴偏移量

阴影模糊半径

阴影颜色；1、X轴偏移量，必选项，设置水平阴影的大小，正值阴影向右投影，负值向左投影。2、Y轴偏移量，必选项，垂直方向阴影的大小，正值阴影向下投影，负值向上投影。3、阴影模糊半径，可选项，阴影的模糊距离，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。4、阴影颜色，可选项，阴影的颜色，如果缺省，则浏览器会取默认色，但各浏览器默认色不一样，不建议缺省。5、可以叠加多个阴影，用逗号分隔，以增加文字的立体的效果8.3box-shadow盒阴影box-shadow:投影方式X轴偏移量Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色；投影方式：可选项，它有2个取值：outset：默认值，它的投影方式是外阴影；Inset：它的投影方式为内阴影。X轴偏移量，必选项，是指阴影水平偏移量，其值可以是正负值Y轴偏移量，必选项，是指阴影的垂直偏移量，其值也可以是正负值阴影模糊半径，可选项，但其值只能是为正值，为0时，阴影不具有模糊效果阴影扩展半径，可选项，其值可以是正负值，如果值为正，阴影扩大，负值，则缩小；阴影颜色，可选，如果不设定任何颜色时，浏览器会取默认色，建议不要省略此参数。可以叠加多个阴影，用逗号分隔，以增加阴影的效果。CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。CSS3的圆角边框使用border-radius

属性来实现，这是一个复合属性，基本语法如下border-radius:1-4length|%/1-4length|%;8.4CSS3圆角边框

border-radiusLength：半径单位，不可为负值，单位可以是px、em、rem或百分比。如果“/”前后的值都存在，那么“/”前面的值表示水平半径，“/”后面值表示垂直半径。如果没有“/”，则表示水平和垂直半径相等。如果给定4对值，则分别表示top-left、top-right、bottom-right、bottom-left的4个角的半径如果给定3对值。则第1个值为top-left，第2个值为top-right，bottom-left，第3个值为bottom-right如果给定2对值。则第1个值为top-left和bottom-right，第2个值为top-right，bottom-left如果只给出一个值，则4个角的半径都相同。border-radiusborder-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法：其他写法border-top-left-radius:<length>

<length>//左上角border-top-right-radius:<length>

<length>//右上角border-bottom-right-radius:<length>

<length>//右下角border-bottom-left-radius:<length>

<length>//左下角border-radius8.5渐变Gradient渐变色指在两个或多个颜色之间平稳的过渡的效果，CSS3的渐变分为linear-gradient（线性渐变）和radial-gradient（径向渐变），使用的是background或background-images属性，不能用background-color属性。1、线性渐变，指以线性角度控制渐变。语法格式：linear-gradient([<angle>],<color-stop>[,<color-stop>]……)说明：color：必选项，是指渐变的颜色，至少要2种以上的颜色。stop：可选性，指渐变开始的位置，缺省则均匀渐变。angle：可选性，指的是渐变的线性角度，取值有两种:一种是角度（单位为deg）;另外一种是使用关键字，linear-gradient（1）颜色均匀间隔的渐变（2）颜色不均匀分布的渐变（3）重复的线性渐变radial-gradient径向渐变，指的是颜色从内到外进行的圆形或椭圆渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。语法格式如下background:radial-gradient(position,shapesize,color1-stop,color2-stop…)position：可选项，用于定义径向渐变的“圆心位置”，取值跟background-position属性取值一样，如缺省，默认为中心点。shape：可选项，渐变的形状。取值为值circle或ellipse，circle表示圆形，ellipse表示椭圆形。默认值是ellipse。size：可选项，渐变的尺寸大小。color：必选项，定义渐变的颜色，至少有2种以上的颜色。（1）颜色均匀间隔的径向渐变 div{ width:150px; height:100px; background:radial-gradient(red,yellow,#ccc); }（2）颜色不均匀分布的径向渐变div{ width:100px; height:100px; background:radial-gradient(circle,red5%,yellow40%,#ccc70%); }radial-gradientCSS3的过渡就是平滑的改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。8.6CSS3过渡transitions基本语法如下：transition:[property][duration][timing-function][delay];InternetExplorer10、Firefox、Opera和Chrome都支持transition属性，InternetExplorer9以及更早版本的浏览器不支持transition属性。（1）property：必选项，给定要使用过渡的CSS属性名称，取值为：none：无，没有属性使用该效果all：所有css属性都使用过渡效果property：具体过渡效果的css属性名：如width、color等（2）duration：必选项，给定过渡效果所花费时间，单位毫秒，默认是0，意味着没有效果。（3）timing-function：可选性，定义过渡效果的速度曲线。取值为：Linear：规定以相同速度开始至结束的过渡效果ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in：

规定以慢速开始的过渡效果ease-out 规定以慢速结束的过渡效果ease-in-out：规定以慢速开始和结束的过渡效果（4）delay：可选性，给定过渡开始之前需要等待的时间，单位毫秒，默认是0。transitionstransform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D转换。transform属性的基本语法如下所示：transform：none|transform-functions;旋转倾斜缩放移动8.7CSS3变形transform属性

描述参数说明rotate(angel)旋转元素。angel是度数值，代表旋转角度。skew(x-angel,y-angel)倾斜元素。angel是度数值，代表倾斜角度。skewX(angel)沿着x轴倾斜元素。skewY(angel)沿着y轴倾斜元素。scale(x，y)缩放元素，改变元素的高度和宽度。代表缩放比例，取值包括正数、负数和小数。scaleX(x)改变元素的宽度。scaleY(y)改变元素的高度。translate(x,y)移动元素对象，基于x和y坐标重新定位元素。元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数。translateX(x)沿着x轴移动元素。translateY(y)沿着y轴移动元素。

transform函数一个完整的CSSanimations由两部分构成：一组定义的动画关键帧调用动画@keyframes规则Animation8.8动画animations定义动画在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。@keyframes规则的语法格式如下所示：@keyframes

animationname{

keyframes-selector{css-styles;}}animationname：表示当前动画的名称，必选项。keyframes-selector：关键帧选择器，描述关键帧的位置值，取值范围从0%~100%，也可以是关键字from或者to。其中from等同于0%，表示动画的开始，to等同于100%。动画创建好后，使用animation属性调用动画。它的基本语法如下所示：animation:[name][duration][timing-function][delay][iteration-count][direction][fill-modeplay-state];InternetExplorer10、Firefox16.0、chrome43.0、safari9.0以上版本都支持@keyframes

规则和animation属性。InternetExplorer9，以及更早的版本，不支持@keyframe

规则或animation属性。调用动画animationsAnimation属性属性

描述name@keyframes中定义的动画名称，取值none，则无动画效果，必选项。duration动画完成一个周期所花费时间，单位毫秒，默认是0，必选项timing-function规定动画的速度曲线，取值同transition–timing-function的值，默认是"ease"，可选。delay规定动画开始前的延迟，单位毫秒，可选，默认是0。iteration-count规定动画被播放的次数，取值为n，默认是1，infinite为无限播放，可选direction规定动画播放方向，默认是"normal"，可选。reverse倒序播放,alternate交替播放