day15，16/圆角/设置背景/背景蒙版/阴影/渐变

圆角

border-radius 设置圆角
border-radius：左上 右上 右下左下；
左上！=右下 右上=左下
border-radius：左上 右上 右下；

左上=右下 右上=左下
border-radius：左上 右上；

左上=右上=左下=右下
border-radius：左上；

实质上，每一个角的上面都有一个水平半径和垂直半径，如果每一个方向上的半径不同，则需要写成水平半径/垂直半径

圆角的值也可以设置百分比，一般的制作一个圆，可以直接设置50%

设置背景

background-origin 设置背景图渲染的起始位置
padding-box 默认值，从padding位置开始渲染
content-box 从内容部分开始渲染
border-box 从border开始渲染

background-size 设置背景图的填充方式，也就是设置背景图大小
值：
cover 内容是以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片
contain 以长边为基础渲染图片，短边按比例缩放
background-size :宽度 高度；
如果只写一个宽度，高度按照比例渲染
宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比

css3支持设置多个背景图
设置方式是使用英文逗号分隔开每一个设置

background:url(./images/icon_img.gif) no-repeat 0 0,url(./images/icon_pdf.gif) no-repeat right top,#04be02 url(./images/icon_ppt.gif) no-repeat center center ;

背景蒙版

背景蒙版mask
1.最初只有谷歌浏览器支持
2.背景蒙版可以把透明图的透明部分渲染为不透明，把不透明的渲染为透明
3.他的设置方式和背景图设置一致

浏览器前缀
-webkit-：是谷歌、苹果等浏览器内核的前缀
-moz-：是火狐浏览器内核的前缀
-ms-：是ie浏览器内核的前缀
-o-：欧朋浏览器内核的前缀

在css属性名之前添加浏览器前缀，表示该css属性是浏览器的私有属性

阴影

box-shadow 设置阴影
box-shadow：x方向的偏移量 y方向的偏移量 阴影的发散度 阴影的宽度 阴影的颜色 [阴影的位置]
inset 设置内阴影

box-shadow：10px 10px 20px 0 #ff0 inset.

设置多组阴影，使用英文逗号隔开，设置的方式一样

注意：在元素上设置阴影，通常是为了增强元素的立体感，阴影不占据文档流空间，因此不会引起元素盒模型的变化

文字阴影

设置文字阴影
text-shadow：x轴偏移 y轴偏移 模糊度 阴影颜色

text-shadow: 10px -10px 0 #f00;

如果需要设置多个阴影，就使用英文逗号隔开

text-shadow: 0 -5px 5px #f00,0 -6px 10px #ff0,0 -10px 15px #f60;

渐变

渐变，至少IE10支持
渐变也是背景图的一种
1.线性渐变
background：linear-gradient（to方向，颜色 开始渐变的位置，颜色 开始渐变的位置，颜色 开始渐变的位置…）

background: linear-gradient(to right, #f00 30%,#ff0 60%,#f0f 100%);

linear-gradient 里面的参数
1.to 方向，方向可以使用具体的方向单词，可以使用角度度数
如果是度数，则直接写具体角度，不需要加to
正值：顺时针旋转
0-> 向上
90-> 向右
180-> 向下
负值：逆时针旋转

background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,#04be02 20%,#04be02 100%) repeat-x;

开始渐变的位置 可以是具体的数值，也可以是百分比

 background:#000 linear-gradient(to right,#fff 0,#fff 50px,transparent 50px,transparent 100px) repeat-x 0 center;

径向渐变

radial-gradient 设置径向渐变
radial-gradient（半径 形状 at 圆心，颜色 渐变的开始位置，颜色 渐变的开始位置…）

background: radial-gradient(100px circle at 0px 0px,#f00 0%,#0f0 50%,#ff0 100%);

形状的值：
circle 圆形，默认值，可以省略

半径可以是具体的数值，也可以是如下系统给定的值：
farthest-corner 最远角
closest-corner 最近角

farthest-side 最远边
closest-side 最近边

圆心的设置
1.可以是具体数值，第一个数值代表x轴方向，第二个数值代表y轴方向
2.可以是left top right bottom center 等方向名词的组合

background: radial-gradient(50px at right center,#f00 0%,#0f0 50%,#ff0 100%);

渐变开始的位置
1可以是具体数值
2.可以是百分比，百分比是以半径长度为基准

重复渐变

重复性渐变
repeating-linear-gradient设置重复性线性渐变，设置方式和线性渐变一样，效果是自动渲染出重复的渐变内容
repeating-radial-gradient 设置重复性径向渐变，语法同径向渐变一致

background: repeating-linear-gradient(90deg,transparent 0,transparent 10px,#000 10px,#000 20px),repeating-linear-gradient(0deg,#ff0 0,#ff0 10px,#f00 10px,#f00 20px);

设置重复性渐变需要注意
1.需要设置重复渐变颜色起始点
2.至少设置两种颜色

同背景图一样，渐变也可以设置多组渐变,同时设置多组背景图或者渐变图，后面设置的会被前面设置的图覆盖