第十三天笔记，CSS3文本属性及背景新增属性

css3的文本属性

一、浏览器前缀的简介及应用

-ms-:IE浏览器专属

-moz-：所有基于Gecko引擎的浏览器，如火狐

-o-：Opera浏览器专属

-webkit-：基于webkit引擎的浏览器，谷歌、苹果

二、文本阴影属性语法及应用

定义：text-shadow

属性值：

1.水平偏移量，正值向右，负值向左

2.垂直偏移量，正值向下，负值向上

3.阴影的模糊距离，值越大，阴影边缘越模糊

4.阴影颜色

三、box-shadow 盒子阴影

属性值：

h-shadow:水平阴影的位置，允许负值，必须

v-shadow:垂直阴影的位置，允许负值，必须

blur：模糊距离，可选

spread：阴影的大小，可选

color:阴影的颜色，可选。

inset:从外层的阴影改变阴影内侧阴影

box-shadow: 10px 10px 5px #888888

四、CSS3 渐变

1.线性渐变

语法：

background：linear-gradient(direction,color-stop1,color-stop2,...)

说明：

direction：默认为to bottom，即从上向下的渐变；

to left、top right、to bottom、to top

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的渐变

to right bottom、to right top、to left bottom、to left top

分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

使用角度渐变

div { background: linear-gradient(10deg, red, blue) }

2.径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。 shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。 size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

渐变形状

div { background: radial-gradient(circle, red, yellow, green); }圆形 div { background: radial-gradient(ellipse, red, yellow, green); }椭圆形

3.重复渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

CSS3 背景的新增属性

1.background-size

基本语法：background-size: length | percentage | cover | contain;

length：两个值，宽高

percentage百分比设置图片宽高

cover：宽度高度等比放大，直到铺满为止

contain：只要有一边占满就停止 。

background-size：100% 100%;---按容器比例撑满，图片变形

background-size：cover;--宽度高度等比放大，直到铺满为止