21 圆角、背景、阴影

一、圆角

border-radius 设置圆角

1. 左上!=右下!=右上!=左下

border-radius:左上 右上 右下 左下;

2. 左上!=右下 右上=左下

border-radius:左上 右上 右下;

3. 左上=右下 右上=左下

border-radius:左上 右上;

4. 左上=右下=右上=左下

border-radius:左上;

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

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

父元素设置圆角后，子元素覆盖，导致圆角没显示，这个时候添加 over-flow:hidden;就可以解决

二、背景

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

值：

1. padding-box 默认值，从padding位置开始渲染
2. content-box 从内容部分开始渲染
3. border-box 从border开始渲染

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

值：

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

值还可以是以下写法

background-size:宽度 高度;

如果只写一个宽度，高度按照比例渲染

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

多个背景图

css3 支持设置多个背景图

设置方式是使用英文逗号分隔开每一个设置

.wp{
    width: 200px;
    height: 200px;
    border: 1px #f00 solid;
    background: url(../image/icon_img.gif) no-repeat 0 0,url(../image/icon_pdf.gif) no-repeat right top,#04be02 url(../image/icon_ppt.gif) no-repeat center center;
    /* background-color:#04be02 ; */
    }
    /* 背景颜色，要不就单独设置，要不就放在最后一个背景设置里 */

背景蒙版 mask

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

浏览器前缀

1. -webkit-：是谷歌、苹果等浏览器内核的前缀
2. -moz-：是火狐浏览器内核的前缀
3. -ms-：是IE浏览器内核的前缀
4. -o-：欧朋浏览器内核的前缀

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

.wp{
    width: 300px;
    height: 300px;
    background: #04be02;
    border: 1px #f00 solid;
    -webkit-mask: url('../image/bt.png') no-repeat center center;
}

三、box-shadow 设置阴影

box-shadow：x方向的偏移量 y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色 [阴影位置]

inset 设置内阴影

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

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

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

.wp2{
    background: #ff0;
    border-radius: 50%;
    box-shadow: 0 0 50px 10px #f00 ;
}
.wp3{
    box-shadow: 0 0 50px 2px #f60 inset;
}
.wp4{
    box-shadow:10px 0 0 0 #f60,-10px 0 0 0 rgb(155, 54, 140),0px -10px 0 0 rgb(197, 226, 78) ,0 10px 0 0 rgb(37, 208, 43);
}