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>

效果:

​ 这本书上有很多新增的属性。

评论

this is is footer