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可以控制网页的显示, ...
随机推荐
- MYSQL优化浅谈,工具及优化点介绍,mysqldumpslow,pt-query-digest,explain等
MYSQL优化浅谈 msyql是开发常用的关系型数据库,快速.稳定.开源等优点就不说了. 个人认为,项目上线,标志着一个项目真正的开始.从运维,到反馈,到再分析,再版本迭代,再优化… 这是一个漫长且考 ...
- Hiero的spreadsheet中添加tag属性列
Hiero在对剪辑线上的item进行管理的时候,往往会添加能多tag,而在管 理面板spreadsheet中却无法对tag进行查询,这是一件很麻烦的事,Hiero Development Guide中 ...
- JAVA的debug入门和多断电调试
调试的一般都是逻辑 第一步的错误双击数字旁边的蓝色地方,或者点击右键如图 断点的意思就是程序执行在哪里就停止 当找不到DEBUG中的Variables是在位置输入Variables就可以了: 再按下F ...
- Winfrom Chart实现数据统计
简介 Chart图标根据实际使用情况,部分图表适用于多组数据的数据分析统计功能,例如柱状图:部分图表适用于单组数据的数据分析统计,例如饼状图. 主要属性 注意使用: Chart图表的如下属性:Lege ...
- CentOS 7.4 初次手记:第三章 CentOS基础了解
第三章 CentOS基础了解... 36 第一节 语言编码.终端... 36 I 查看语言编码... 36 II Tty?.pts/?. 36 第二节 bash/sh command. 38 I 查找 ...
- 我的less学习之路
less注释 可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中.开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文 ...
- SpringCloud之服务注册与发现Eureka(一)
Eureka是Spring Cloud Netflix微服务套件中的一部分,可以与Springboot构建的微服务很容易的整合起来.Eureka包含了服务器端和客户端组件.服务器端,也被称作是服务注册 ...
- PHP 函数获取文件名
<?php // php 获取 文件名 function getExt($url){ $arr = parse_url($url); // URL 字符串予以解析,并将结果返回数组中 //pr ...
- JS和AS交互
这个话题在网上应该说很好找,有很多这方面的资料.比者也看过一些,不过大部分都是AS2与JS进行交互.很少提到AS3,即使有,也让人感觉浅尝辄止.很多东西并没有介绍的太清楚.所有笔者萌生了写这样一篇教程 ...
- Selenium2+python自动化38-显式等待(WebDriverWait)
From: https://www.cnblogs.com/yoyoketang/p/6517477.html 前言: 在脚本中加入太多的sleep后会影响脚本的执行速度,虽然implicitly_w ...