如何用css画一个彩虹---v客学院技术分享
无意间看到了CSS radial-gradient() 函数实现了如下图的样式
仔细一看还真有点像灯光下的鸡蛋,O(∩_∩)O哈哈~
今天我就来用radial-gradient()函数教大家画一个简单的彩虹吧~~~~
语法请参照此链接http://www.runoob.com/cssref/func-radial-gradient.html
1.首先画好结构,也就是在网页中画一个div
2.接着为div设置border-radius为100%,也就是直径为260个像素,使其变成了一个圆
3.然后为这个圆,也就是.box设置radial-gradient()函数(这里的moz,webkit前缀是为了兼容不同内核的浏览器)
通过以上3步,我们实现效果如下:
额。。。。。。。。。。。应该没有人见过如此圆润的彩虹吧。。。。。。
是的,如果能裁掉一半就perfect了。
其实实现很简单,我们只需要写一个跟背景颜色一样的div固定在“圆润彩虹“的下半边就ok啦!
完整代码如下:
(php开发,web前端,ui设计,vr开发专业培训机构,v客学院版权所有,转载请注明出路,谢谢!!!)
如何用css画一个彩虹---v客学院技术分享的更多相关文章
- DIV+css排版问题技巧总结---v客学院技术分享
DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...
- 5分钟搞定一个网页特效----v客学院技术分享
这是我们v客学院基础班的童鞋都做完的一个超简单炫酷的特效demo,今天我来带大家用最快的速度和最简单的方法制作一个音乐抖动条,大家有兴趣不妨一起来试试~~~~~~~ 做这个demo之前我们得有一些ht ...
- 前端工程师在实现支付功能的时候能做些什么(V客学院技术分享)?
现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值 ...
- HBuilder android 打包指南(V客学院技术分享)
前提:确保配置文件(manifest.json)已配置完,没有异常. 打包选项如下: Android 包名 :在Android系统中是判断一个App的唯一标识,不同的App可以有同样的名字,但是它的包 ...
- Echarts快速入门---------v客学院技术分享
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- 正则表达式的模式匹配----V客学院技术分享
正则表达式是由一个字符序列形成的搜索模式. 你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容. 正则表达式可以是一个简单的字符,或一个更复杂的模式. 正则表达式可用于所有文本搜索和文本替换的 ...
- window对象之计时器--v客学院技术分享
setTimeout()和setInterval()可以用来注册在指定的时间之后单次或者重复调用的函数.因为它们都是客户端JavaScript中重要的全局函数,所以定义为window对象的方法,但是作 ...
- Javascript闭包解析----------------v客学院技术分享
跟java,php等编程语言一样,javascript也采用词法作用域,简单的来说就是函数的执行依赖于变量的作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,还必 ...
- 数组去重汇总—v客学院技术分享
上周基础班结束了数组的学习内容,这几天有时间整理了下几种比较常用的数组去重的方法供大家查阅!!!!! 话不多说,直接贴代码吧~~~~~~~ 欢迎大家指正,共同学习,一同进步!!! (php开发,web ...
随机推荐
- 深度学习框架集成平台C++ Guide指南
深度学习框架集成平台C++ Guide指南 这个指南详细地介绍了神经网络C++的API,并介绍了许多不同的方法来处理模型. 提示 所有框架运行时接口都是相同的,因此本指南适用于所有受支持框架(包括Te ...
- Docker Context基本原理
Docker Context基本原理 介绍 本指南介绍了上下文如何使单个Docker CLI轻松管理多个Swarm集群.多个Kubernetes集群和多个单独的Docker节点. 单个Docker C ...
- httprunner中的分层(api、testcase、testsuite)及实际使用
一.分层思想 api定义层:最底下的一层是api的定义层testcase层:测试用例层,调用定义层的内容testsuite:测试套件层 二.分层案例设计实现实践举例 1.api 层: 2.testca ...
- POI导出Excel时下拉列表值超过255的问题(String literals in formulas can't be bigger than 255 characters ASCII)
//创建Excel工作薄对象 Workbook workbook = new HSSFWorkbook(); //生成一个表格 设置:页签 Sheet sheet = workbook.createS ...
- 基于Android平台的图书管理系统的制作(3)
前两篇介绍了主页面和Student,这一篇来讲Book类和工作人员. Book是图书管理系统的核心,查书,借书,还书,增加书都与Book类息息相关.Book类的设计很简单:包含信息:名称.作者.页数. ...
- Pytorch CNN网络MNIST数字识别 [超详细记录] 学习笔记(三)
目录 1. 准备数据集 1.1 MNIST数据集获取: 1.2 程序部分 2. 设计网络结构 2.1 网络设计 2.2 程序部分 3. 迭代训练 4. 测试集预测部分 5. 全部代码 1. 准备数据集 ...
- markdown写ppt (史上最全)
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- webpack 快速入门 系列 - 自定义 wepack 上
其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...
- N沟通场效应管深度图解(1)工作原理及Multisim实例仿真
场效应晶体管(Field Effect Transistor, FET)简称场效应管,是一种由多数载流子参与导电的半导体器件,也称为单极型晶体管,它主要分型场效应管(Junction FET, JFE ...
- Git上传代码遇到的报错
Git上传代码遇到的报错 1.git上传代码卡住(Total 7072 (delta 2508), reused 6844 (delta 2376), pack-reused 0) git confi ...