3.HTML+CSS 制作个太阳

3.HTML+CSS 制作个太阳

效果地址：https://codepen.io/flyingliao/pen/moPBwR

HTML code：

<div class="sun"></div>

CSS code：

html,body{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
}
.sun{
  width: 10em;
  height: 10em;
  /* 将正方形四直角改为圆角成 圆 */
  border-radius: 50%;
  /* 为太阳设置外围光辉阴影 */
  box-shadow: 0px 0px 100px #FFFF00;
  /* 为圆从外到内设置颜色 黄色-》红色 */
  background: radial-gradient(circle at center, red, gold);
}

 

posted on 2019-03-02 21:38  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10463092.html