9.9 冯娜
学习日志
六、CSS3新增属性
(一)新增背景属性
1、background-clip
（1）background-clip：设置背景覆盖范围
属性值：border-box（背景显示区域到边框）
padding-box（背景显示区域到内边距框）
centent-box（背景显示区域到内容框）
（2）background-origin:设置背景覆盖的起点
属性值：border-box/padding-box/centent-box
（3）background-size:设置背景的大小
属性值：cover/contain/百分比
2、background-origin（浏览器专属属性）
（1）-ms-:IE
（2）-moz-:Firefox
（3）-o-：Opera
（4）-webkit-:Chrome
3、background-size（设置背景的大小）
(1) border-box:背景起点在边框的左上角。
(2)padding-box:背景起点在内边距框的左上角，默认值。
(3)content-box:背景起点在内容框的左上角。
（二）多背景图片
CSS3修改了背景的所有参数，将原有参数扩展成可以输入多个属性值，并用逗号隔开。
（三）CSS3新增文本相关属性
1、CSS3新增使用服务器字体
支持的字体文件格式有：ttf和otf两种。
2、CSS3新增文本属性
（1）text-overflow:设置当文本溢出元素框时的处理方式。
属性值：clip（裁剪文本内容）
ellipsis（显示省略号，用于代替被裁减的文本内容）
（2）word-break:规定自动换行的方式。
属性值：normal/break-all/keep-all
（3）word-wrap:规定单词的换行方式。
属性值：nomal/break-word
（四）CSS3新增盒模型属性
1、圆角边框:
(1)border-radius:2em 1em 4em/0.5em 3em:含义如下：
border-top-left-radius:2em 0.5em;
border-top-right-radius:1em 3em;
border-botton-top-right-radius:4em 0.5em;
border-botton-top-left-radius:1em 3em;
2、box-shadow:
(1)h-shadow:水平方向偏移量
(2)v-shadow：垂直方向偏移量
(3)blur：模糊的半径
(4)spread：阴影额外增加的尺寸
(5)color：阴影的颜色
(6)inset：切换为内部阴影
4、resize
设置元素是否可以由用户调整其尺寸。
(1)none:无法调整
(2)both:调整宽高
(3)horizontal:调整宽
(4)vertical:调整高
需要设置元素的overflow值，使得此元素生效。
5、outline-offset
设置轮廓的偏移量
（五）CSS3新增变形动画属性
1、CSS3的变形属性
（1）transform:用于设置元素的变形，可以设置一个或者一个以上的变形函数。
（2）transform-origin:表示元素旋转的中心点，第一个值表示元素旋转中心点的水平位置，它可以赋值：left，right,center,长度，百分比；第二个值表示元素旋转中心点的垂直位置，它可以赋值：top,bottom,center,长度，百分比。
（3）
2、CSS3的3D变形属性
（1）transform属性，增加了3个变形函数
（a）rotateX:表示元素沿着x轴旋转
（b）rotateY:表示元素沿着y轴旋转
（c）rotateZ:表示元素沿着z轴旋转
（2）transform-style:用于设置嵌套的子元素在3D空间中显示的效果。
（3）perspective:设置成透视效果
（4）perspective-origin:设置3D元素所基于的x轴和y轴，改变3D元素的底部位置，该属性取值与perspective-origin相同，默认值为50%，50%。
（5）backface-visibility:设置当元素背面面向屏幕时是否可见，通常用于设置不希望用户看到旋转元素的背面。
属性值有：visible(背面可见，默认值)
hidden(背面不可见)
（六）CSS3的过渡属性
说明：
transition-timing-function:设置过渡动画的时间曲线。
(1)ease:慢速开始，然后变快。
(2)linear:以相同速度开始至结束的过渡效果。
(3)ease-in:以慢速开始的过渡效果。
(4)ease-out:以慢速结束的过渡效果。
(5)ease-in-out:以慢速开始和结束的过渡效果。
(6)cubic-bezier(x1,y1,x2,y2):贝济埃曲线控制动画的效果。
案例 ：
</head>
<body>
<div style="transition: width 4s,height 4s,background-color 4s;
-webkit-transition: width 4s,height 4s,background-color 4s;
"></div>
</body>
效果：
hover：
渐变效果
（七）CSS3的动画属性
案例：
</head>
<body>
<div></div>
</body>
效果：
实现移动一周同时颜色变化。
（八）CSS3新增多列属性
案例：
</head>
<body>
<div>
<h1>出师表——诸葛亮 出自《三国志 诸葛亮传》</h1>
先帝创业未半而中道崩殂(cú)，今天下三分，益州疲(pí)弊，此诚危急存亡之秋也。然侍卫之臣不懈(xiè)于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗(yí)德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞(sè)忠谏之路也。
宫中府中，俱为一体，陟(zhì )罚臧(zāng)否(pǐ)，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸(yōu)之、费祎(yī)、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗(wèi)陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨(bì)补阙漏，有所广益。
将军向宠，性行（xíng）淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行(háng )阵和睦，优劣得所。
亲贤臣，远小人，此先汉所以兴隆也;亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓（huán）、灵也。侍中、尚书、长(zhǎng)史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻(wén)达于诸侯。先帝不以臣卑（bēi）鄙（bǐ），猥(wěi)自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间,尔来二十有(yòu)一年矣! 【“有”是通假字，通“又”，跟在数词后面表示约数。所以读yòu】
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙(sù)夜忧叹，恐托付不效，以伤先帝之明，故五月渡（dù）泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶(shù)竭驽(nú)钝，攘(rǎng)除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效，不效,则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎(jiù)。陛下亦宜自谋，以咨诹(zōu)善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激!
今当远离，临表涕零，不知所云。
</div>
<div class="div1"style="column-rule-style: dashed;column-rule-width: thick;column-rule-color: red;-webkit-column-rule-style:dashed ;-webkit-column-rule-width: thick;-webkit-column-rule-color: r;">
<h1 style="column-span: all;-webkit-column-span:all">>出师表——诸葛亮 出自《三国志 诸葛亮传》卷十五</h1>
先帝创业未半而中道崩殂(cú)，今天下三分，益州疲(pí)弊，此诚危急存亡之秋也。然侍卫之臣不懈(xiè)于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗(yí)德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞(sè)忠谏之路也。
宫中府中，俱为一体，陟(zhì )罚臧(zāng)否(pǐ)，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸(yōu)之、费祎(yī)、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗(wèi)陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨(bì)补阙漏，有所广益。
将军向宠，性行（xíng）淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行(háng )阵和睦，优劣得所。
亲贤臣，远小人，此先汉所以兴隆也;亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓（huán）、灵也。侍中、尚书、长(zhǎng)史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻(wén)达于诸侯。先帝不以臣卑（bēi）鄙（bǐ），猥(wěi)自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间,尔来二十有(yòu)一年矣! 【“有”是通假字，通“又”，跟在数词后面表示约数。所以读yòu】
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙(sù)夜忧叹，恐托付不效，以伤先帝之明，故五月渡（dù）泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶(shù)竭驽(nú)钝，攘(rǎng)除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效，不效,则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎(jiù)。陛下亦宜自谋，以咨诹(zōu)善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激!
今当远离，临表涕零，不知所云。
</div>
</body>
效果：
这本书上有很多新增的属性。
近期评论