第三讲 CSS3重要样式及属性

一、文字相关样式

1、颜色（color)

透明度：

RGBA： color: rgba(255, 0, 0, 0.6);

注意: RGBA是在RGB的基础上多了控制alpha透明度的参数

2、文本阴影

语法：text-shadow: h-shadow  v-shadow    blur    color;

h-shadow：必需。水平阴影的位置。允许负值

v-shadow：必需。垂直阴影的位置。允许负值

blur ：可选。模糊的距离。

color：可选。阴影的颜色

例如代码：

3、CSS3 @font-face 规则

使用您需要的字体

• 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
• 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style> 
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>

4、 CSS3 边框样式

1、圆角边框 (Border)

圆角边框： border-radius: 20px 20px 20px 20px;

语法：border-radius:   length/% ;

border-radius:   一个值； 四个角都一样

border-radius:   值1 值2；  值1表示左上角、右下角；值2表示右上角、左下角

border-radius:    值1  值2  值3； 值1表示左上角；值2表示右上角、左下角；值3表示右下角 border-radius:   值1   值2   值3   值4；左上角、右上角、右下角、左下角

注意：顺时针走向

2、阴影

语法 :

box-shadow:  X轴偏移量  Y轴偏移量   [阴影模糊半径]    [阴影扩展半径]   [阴影颜色]  [投影方式];

参数：

值
x轴偏移量	必需。水平阴影的位置，允许负值
y轴偏移量	必需。水平阴影的位置，允许负值
阴影模糊半径	模糊距离（可写可不写）
阴影扩展半径	阴影的尺寸（可写可不写）
阴影颜色	阴影的颜色 省略默认为黑色（可写可不写）
投影方式	设置（inset时为内部阴影方式，若是省略为外部阴影方式）（可写可不写）

3、CSS3 多重背景图片  

  CSS3 允许您为元素使用多个背景图像。 为 body 元素设置两幅背景图片：

语法：body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif); }

注意：多个背景之间用逗号隔开

5、渐变

1、线性渐变

语法：background-image : linear-gradient(方向 ， 颜色1    颜色1位置 ， ....)

方向：

渐变角度：单位deg 例如：45deg     to  英文单词  to right  从左向右渐变

颜色位置：

• 数值+单位
• 可以是 百分比

例如：

background-image: linear-gradient(45deg, red,pink);
 background: linear-gradient(red 0%,pink 50%); /*image也可以省略不写*/
 background-image: linear-gradient( to right, red 0px,pink 50px); /* 从左到右 */

2、重复线性渐变

background-image : repeating-linear-gradient()

background-image: repeating-linear-gradient(to bottom right, red,pink); /* 从左上到右下 */

3、径向渐变

语法:background-image : radial-gradient(形状  半径   圆心位置，颜色1    颜色1位置 , ...) 

例如：background: radial-gradient(circle closest-corner at 40px 60px, #f00 0%,#00f 50%);
值：

• shap 形状

ellipse  默认 椭圆形
circle  圆形

•  size 渐变大小

farthest-corner  默认 指定径向渐变的半径长度是从圆心到离圆心最远的角
farthest-side  指定径向渐变的半径长度是从圆心到最离圆心远的边
closest-corner  指定径向渐变的半径长度是从圆心到离圆心最近的角
closest-side  指定径向渐变的半径长度是从圆心到离圆心最近的边

• position 圆心位置

at  x位置  y位置
x，y取值：数值+单位、百分比、英文单词left right center top bottom

• 重复径向渐变

语法：background-image : repeating-radial-gradient()

background: repeating-radial-gradient(circle closest-corner at top center, #f00 0%,#00f 50%);

6、过渡

1、过渡属性

语法：transition-property：；

transition-property: width, height; 
transition-property: all;

注意：多个属性名之间有逗号隔开 或 all

2.过渡持续时间

语法：transition-duration: ;

transition-duration:0.5s ;
transition-duration: 500ms;
/* 1秒=1000毫秒 */

单位：秒s 或 毫秒ms

3、过渡速度

语法：transition-timing-function: ;

• ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
• linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
• ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
• ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
• ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• cubic-bezier(x1,y1,x2,y2)：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)        四个值特定于曲线上点P1和点P2。

注意：所有值需在[0, 1]区域内，否则无效。

 

 

 

4、过渡延迟时间

语法：transition-delay

单位：秒s 或 毫秒ms

transition-delay: 1s;

5、缩写：

语法：transition :  transiton-propery值   transition-duration值   transition-timing-function值     transition-delay值;

二、简答题

1、渐进增强和优雅降级的区别 

渐进增强：最初针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。

优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

区别：优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器的前一个版本。在这种设计下，旧版的浏览器被认为仅能提供最简单的的浏览体验。(优先关注最高级的，再考虑兼容)

渐进增强认为应关注于内容本身。会优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，这使得渐进增强成为一种更为合理的设计范例。（先考虑兼容）

低版本用户居多，优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，优先采用优雅降级的开发流程。不过大多数情况下都是采用渐进增强的方式，因为它更加合理。

 2、重绘和回流的区别

 重绘：元素的结构（宽高、布局、显示隐藏、内部文字大小）未发生改变，只是元素的外观样式发生改变，比如背景颜色、内部文字颜色、边框颜色等。此时会引起浏览器重绘，显然重绘的速度快于回流。

回流：当render tree中的元素的宽高、布局、显示、隐藏或元素内部文字结结构发生改变时，会影响自身及其父元素、甚至追溯到更多的祖先元素发生改变，则会导致元素内部、周围甚至整个页面的重新渲染，页面发生重构，回流就产生了。

注意：回流一定会触发重绘，而重绘不一定会回流