前端0基础 圆角、背景蒙版、阴影、渐变

使用border-radius 设置圆角

border-radius: 左上 右上 右下 左下;
左上！=右下 右上=左下
border-radius: 左上 右上 左下;
左上=右下 右上=左下
border-radiud: 左上 右上;
左上=右上=右下=左下
border-radius:左上;
实质上，每一个角上面，都有一个水平半径和一个垂直半径，如果每一个方向上的半径不同，
则需要写成： 水平半径/垂直半径
注意： 圆角的值也可以设置百分比，一般的制作一个圆形，可以直接设置50%

这个效果就可以用以下代码实现：

.wp,.wp2,.wp3{
   background: #04be02;
   width: 200px;
   height: 200px;
   border-radius:20% 50%;
   margin: 20px auto;
   overflow: hidden;
        }
.wp2{
   border-radius: 100px 20px;
        }
.wp3{
   border-radius: 100px/30px 70px 80px;
        }
<div class="wp">
 <img src="./images/c.png" alt="">
</div>
<div class="wp2"></div>
<div class="wp3"></div>

背景蒙版 mask

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

浏览器前缀(做兼容)
 -webkit- 是谷歌。苹果等浏览器内核的前缀
 -moz-:是火狐浏览器内核的前缀
 -ms-:是IE浏览器内核的前缀
 -O-：欧朋浏览器内核的前缀
 在css 属性之前添加 浏览器前缀，表示给css属性是浏览器的私有属性

.wp{
   width: 400px;
   height: 300px;
   border: 1px #f00 solid;
   background: #04be02;
   /* 蒙版图 */
   **-webkit-mask**:url(./images/logo.png) no-repeat center center;
   **-webkit-mask-size**:100% 100%;
        }
<div class="wp"></div>

box-shadow 设置阴影

box-shadow:X方向偏移量 y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色 [阴影位置(可不写)]
inset 设置内阴影

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

设置多组阴影，使用英文逗号隔开，设置的方式一样
注意：在元素上设置阴影通常是为了增强元素的立体感，阴影不占据文档流空间，因此不会引起元素盒模型的变化

效果代码如下：

.wp,.wp1,.wp2,.wp3,.wp4{
   width: 200px;
   height: 200px;
   border: 1px #f00 solid;
   margin: 50px 100px;
   box-shadow: 10px 10px 30px 5px #f60 inset;
   display: inline-block;
  }
.wp1{
    background:#ff0;
    border-radius: 50%;
    box-shadow: 0 0 100px 5px rgb(247, 48, 3) inset;
}
.wp2{
    background:#ff0;
    border-radius: 50%;
    box-shadow: 0 0 100px 10px rgb(247, 48, 3);
}
.wp3{
    box-shadow: 0 0 50px 2px rgb(10, 10, 10) inset;
}
.wp4{
    box-shadow: 10px 0 10px 3px #f00,-10px 0 10px 0 #ff0,
    0 -10px 10px 0 #00f,0 10px 10px 0 rgb(249, 4, 192);
}
<div class="wp">wp</div>
<div class="wp1">wp1</div>
<div class="wp2">wp2</div>
<div class="wp3">wp3</div>
<div class="wp4">wp4</div>

渐变，至少IE10支持

渐变也是背景图的一种
1.线性渐变
background:linear-gradient(to 方向，颜色 开始渐变的位置,颜色 开始渐变的位置…)
linear-gradient 里面的参数
1.to方向，方向可以使用具体的方向单词，也可以使用角度的度数，如果是度数直接写具体角度，不需要加to 可以写为45deg
正值：顺时针旋转
0度 -> 向上
90度 -> 向右
180度 -> 向下
负值：逆时针旋转
开始渐变的位置，可以是具体的数值，也可以是百分比

代码如下：

.wp{
  width: 200px;
  height: 200px;
  border: 1px #f00 solid;
  margin: 20px auto;
  /* 线性渐变 */
  background: linear-gradient(45deg,#f81c1c 20%,
  #fc8f4b 35%,#d6fc17 50%,#23d8bd 73%,#5a45f7 83%,#e831be 90%);
}
<div class="wp"></div>

公路效果 代码如下：

.wp4{
   height: 50px;
    margin: 80px 0 200px 0;
    background:#000 linear-gradient(90deg,#fff 0,#fff 50px,transparent 50px,
    transparent 100px) repeat-x 0 center;
    background-size: 80px 20px;
}
<div class="wp4"></div>

径向渐变

radial-gradient 设置径向渐变
radial-gradient(半径 形状 at 圆心,颜色 渐变的开始位置，颜色渐变的开始位置…)
形状的值：circle 圆形 默认值，可省略
半径可以是具体的数值，也可以是如下系统给定的值：
farthest-corner 最远角
closest-corner 最近角
farthest-side 最远边
closest-side 最近边
圆心的设置
1.可以是具体的数值，第一个数字代表X轴方向，第二个数值代表Y轴方向
2.可以是 left top right bottom center 等方向名词的组合
渐变开始的位置
1.可以是具体的数值
2.可以是百分比，百分比是以半径为基准

效果代码如下：

.wp3,.wp4,.wp5,.wp6,.wp7{
   width: 200px;
   height: 200px;
   display: flex;
   border: 1px #f00 solid;
   margin: 20px auto;
   /* 径向渐变 */
   background: radial-gradient(100px circle at 50px 50px,#f00 0%,#0f0 50%
   ,#ff0 100%);
}
.wp3{
   background: radial-gradient(farthest-corner at 20px 30px,#f00 0%,#0f0 50%
   ,#ff0 100%);
}
.wp4{
   background: radial-gradient(closest-corner at 20px 30px,#f00 0%,#0f0 50%
   ,#ff0 100%);
}
.wp5{
   background: radial-gradient(farthest-side at 20px 30px,#f00 0%,#0f0 50%
   ,#ff0 100%);
}
.wp6{
   background: radial-gradient(closest-side at 20px 30px,#f00 0%,#0f0 50%
   ,#ff0 100%);
}
.wp7{
   background: radial-gradient(50px at right center,#f00 0%,#0f0 50%
   ,#ff0 100%);
}
<h2>farthest-corner 最远角</h2>
<div class="wp3"></div>
<h2>closest-corner 最近角</h2>
<div class="wp4"></div>
<h2>farthest-side 最远边</h2>
<div class="wp5"></div>
<h2>closest-side 最近边</h2>
<div class="wp6"></div>
<h2>方位名词组合的圆心</h2>
<div class="wp7"></div>