3.HTML+CSS 制作个太阳
效果地址:https://codepen.io/flyingliao/pen/moPBwR
HTML code:
<div class="sun"></div>
CSS code:
html,body{
margin:;
padding:;
}
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);
}
3.HTML+CSS 制作个太阳的更多相关文章
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery & CSS 制作金属质感的选择按钮
如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
随机推荐
- 基于binlog来分析mysql的行记录修改情况
https://www.cnblogs.com/xinysu/archive/2017/05/26/6908722.html import pymysqlfrom pymysql.cursors im ...
- 将mongo设置为windows的服务
原文链接 https://mp.weixin.qq.com/s/rmWcvjZFJb3z_5M8UPWAPQ PHP的mongo扩展: 首先 下载一个PHP的mongo扩展, 地址:http://do ...
- if的各种真假判断
- Java-Runoob-高级教程-实例-方法:13. Java 实例 – for 和 foreach循环使用
ylbtech-Java-Runoob-高级教程-实例-方法:13. Java 实例 – for 和 foreach循环使用 1.返回顶部 1. Java 实例 - for 和 foreach循环使用 ...
- tarroni music
1,tarroni http://www.tarronishoes.it/audio.php 2, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- Windows和pthread中提供的自旋锁
Windows和POSIX中都提供了自旋锁,我们也可以通过C++11的atomic来实现自旋锁.那么两者性能上面是什么关系?先引入实现代码: #ifndef __spinlock_h__ #defin ...
- 用juniversalchardet解决爬虫乱码问题
爬虫往往会遇到乱码问题.最简单的方法是根据http的响应信息来获取编码信息.但如果对方网站的响应信息不包含编码信息或编码信息错误,那么爬虫取下来的信息就很可能是乱码. 好的解决办法是直接根据页面内容来 ...
- 00012 - ps命令详解
使用权限:所有使用者使用方式:ps [options] [--help]说明:显示瞬间行程 (process) 的动态参数:ps的参数非常多, 在此仅列出几个常用的参数并大略介绍含义-A 列出所 ...
- Try Catch Finally总结
Try Catch Finally探究 1. try.catch.finally语句中,在如果try语句有return语句,则返回的是当前try中变量此时对应的值,此后对变量做任何的修改,都不影响tr ...
- javascript-保留2位小数函数方法
function zero(num){ var str=num.toString(); if(str.indexOf(".")==-1){ return num+'.00'; }e ...