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可以控制网页的显示, ...
随机推荐
- 安装老版本redis .NET 客户端
https://github.com/ServiceStackV3/ServiceStackV3 PM> Install-Package ServiceStack -Version 3.9.71 ...
- 跟未名学Office - PPT核心:表达
目录 第一章. PPT核心:表达 2 第一节 观点 2 第二节 数据来源 2 第三节 逻辑顺序 3 PPT核心:表达 观点 1 vs N 要表达什么? 为什么要做成 ...
- vue中为对象添加值的问题
demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 经常开发出现bug的同事,
各位,再强调一点,以后如果遇到bug的地方,是自己开发的内容,我希望自己去看下调整下,而不是等再此被提出,等到领导再次提出问题,或者多次出现问题会影响自己的评级 现在是我再这里说,以后再其他地方工作, ...
- java学习——异常处理机制
public class ExceptionDemo2 { public static void main(String[] args) { // TODO Auto-generated method ...
- php的语句
1.php流程语句 1.php代码执行从上到下 2.条件语句 if else 和 switch 案例: $name=56; if($name>56) echo "hello world ...
- 三种通用应用层协议protobuf、thrift、avro对比,完爆xml,json,http
原文: https://www.douban.com/note/523340109/ Google protobuf: 优点 二进制消息,性能好/效率高(空间和时间效率都很不错) proto ...
- android-menudrawer 和SlidingMenu 用法
项目地址: https://github.com/gokhanakkurt/android-menudrawer https://github.com/jfeinstein10/SlidingM ...
- 云端搭建内网局域网+NAT冗余上网:vps-centos6.10 +pptp client +2个ros 实现默认走pptp上网,万一pptp断了,走另外一个ros路由+centos7补充了下
介绍下环境: 1.ROS1也是PPTP SERVER,IP为172.16.22.3/24,pptp pool为172.16.23.0/24,pptp的默认帐号是111,密码是123 2.ROS2的IP ...
- [UE4]AWP开镜时模糊
一.Add to Viewport的Zorder越大,添加进来的UI越靠近前面.也就是大的Zorder会覆盖Zorder小的UI. 二.镜头模糊,在专心UI中添加一个模糊滤镜设置模糊值,并放在最上层.