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部分:
<div class="circle"> </div>
效果图如下 :