DAY 16

圆角

border-dadius 设置圆角

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

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

背景设置

设置背景

background-origin 设置背景图渲染的起始位置

值

        padding-box 默认值，从padding位置开始渲染

        content-box 从内容部分开始渲染

        border-box 从border开始渲染

background-size 设置背景图大小（设置背景图片的填充方式，也就是设置背景图的大小）

值

        cover 以最短边为基础渲染图片，场边按比例缩放，有可能无法显示全部图片

        contain 以最长边为 基础渲染图片，短边按比例缩放

值还可以是以下写法

background-size：宽度 高度；如果只写一个宽度，高度按照比例渲染

        宽度和高度可以是具体的数值，也可以是选购对于所在元素的百分比大小

背景蒙版 mask

1.最初只有谷歌浏览器支持

2.背景蒙版可以把透明图的透明部分渲染为不透明，不透明部分渲染为透明

3.他的设置和当时背景图设置一致

浏览器前缀

-webkit-：是谷歌苹果等浏览器内核的前缀

-moz-：是火狐浏览器内核的前缀

-ms-：是IE浏览器内核的前缀

-o-：欧鹏浏览器内核的前缀

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

阴影

box-shadow 设置阴影

box-shadow：X方向的偏移量 Y方向的偏移量 阴影的发散度（模糊度）阴影的宽度 阴影的颜色 [阴影的位置]

inset 设置内阴影

box-shadow：10px 20px 10px 0 #f00 inset；

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

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

渐变

线性渐变

渐变是背景图的一种

background:linear-gradient(to 方向，颜色 开始渐变的位置，颜色，开始渐变的位置)

linear-gradient 里面的参数

1. to 方式，方向可以使用具体的方向单词，可以使用角度度数 如果是度数，则直接写具体角度，不需要加to

正值：顺时针旋转

0 -> 向上

90 -> 向右

180 -> 向下

负值：逆时针旋转

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

径向渐变

radial-gradident 设置径向渐变

radial-gradident（半径 形状 at 圆心，颜色 出现渐变的开始位置，颜色 出现渐变的开始位置，颜色 出现渐变的开始位置）

形状的可选值：

1.circle 圆形，默认值，可以省略

2.ellipse 椭圆

圆心的设置

1. 可以是具体的数值

2.可以是百分比，百分比是以半径长度为基准