关于 css3 画圆，渐变以及加阴影的整合代码

css部分：

.circle{
  width:100px;
  height:100px;

  //颜色渐变 
  background: linear-gradient(red, yellow); //由上往下渐变；

  //background: linear-gradient(to right, red,yellow); //从左往右渐变；

  //background: linear-gradient(to bottom right, red , yellow); // 对角渐变；

  //设置圆角，边角分别为50%;

  border-radius:50%;

  //如果需要分开设置  写法如下：

 // border-top-left-radius:50%; //左上角

 // border-top-right-radius:50%; //右上角

 // border-bottom-left-radius:50%; //左下角

 // border-bottom-right-radius:50%; //右下角

//设置阴影  

//每个边都设置 box-shadow: (X轴偏移量 (允许负值), Y轴偏移量 (允许负值), 阴影模糊半径,  阴影颜色）

  box-shadow:0 0 10px red; 

//如果需要分开设置 写法如下：

// box-shadow:-2 0 10px red; //左边阴影

// box-shadow:2 0 10px red; //右边阴影

// box-shadow:0 2px 10px red; //上边阴影

// box-shadow:0 -2px 10px red; //下边阴影
}

html部分：

 

 

效果图如下 ：