蓝环章鱼

许多海洋生物色彩艳丽,这次用css仿制一下蓝环章鱼的蓝环

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button").click(function(){ });
});
</script>
<style type="text/css">
.linear{width:500px;height:100px;
background:linear-gradient(270deg,#d1b37f 50%,#b0b889,#95bf97,#7bc6a5,#58c3a9,#46b2a2,#3b8e86,#3c7169,#617262,#929173,#c1c08a,#d1cfa6);
}
.radial{width:200px;height:200px;
background:radial-gradient(circle,#d1b37f 30%,#b0b889,#95bf97,#7bc6a5,#58c3a9,#46b2a2,#3b8e86,#3c7169,#617262,#929173,#c1c08a,#d1cfa6 80%);
} </style>
<div class="linear"></div>
<div class="radial"></div>

https://juejin.im/post/5e070cd9f265da33f8653f00#heading-30

..

css:蓝环章鱼的更多相关文章

  1. css模块化思想(一)

    什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种 处理复杂系统分解成为更 ...

  2. webstorm配置scss环境

    1.下载 Ruby  (安装过程中记得勾选添加到环境变量,安装结束最后可能会弹出一个cmd弹框,可以忽略) 2. cmd安装sass gem install sass 3. cmd检查是否安装 sas ...

  3. tarjan 求割点

    在无向连通图中,如果将其中一个点以及所连的所有边都删掉,图就不再连通的话,那么这个点就叫做割点 首先将所有的点分为:1.环中点 2.不成环的单点割点一般出现的情况是:如果(处在不同环中/一环一单点/均 ...

  4. 跨站脚本(XSS)

    1.1 XSS定义 XSS,即为(Cross Site Scripting),中文名为跨站脚本,是发生在目标用户的浏览器层面上的,当渲染DOM树的过程发生了不在预期内执行的JS代码时,就发生了XSS攻 ...

  5. Copy As HTML From VSCode

    JS生成可自定义语法高亮HTMLcode cnblogs @ Orcim  !deprecated! 这里有更好的方案,具体看我的这篇博客博客代码高亮的另一种思路 这篇文章介绍了如何在博客里插入一段 ...

  6. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  8. CSS制作凹环特效

    就是在地面上打凿出凹的圆环效果,利用linear-gradient线性渐变增强内环质感,再用伪类after元素设置中心圆凸块的位置以及大小与跟内环之间的阴影度,然后设置内环的颜色就行了:第四个环上面的 ...

  9. css去掉button点击后的蓝框

    转自:http://www.inbeijing.org/archives/1139 css控制Button 按钮的点击时候出现蓝色边框的问题 添加css属性,这样在点击安按钮的时候就不会有蓝色边框了. ...

随机推荐

  1. ThreadingTCPServer 如何设置端口重用

    一个典型的TCPServer的建立 #ThreadingTCPServer从ThreadingMixIn和TCPServer继承 #class ThreadingTCPServer(Threading ...

  2. 1、Dreamweaver+php开发网站第一步

    1.首先在appserv目录下的www中建立一个网站文件夹,例如test 2.在Dreamweaver中的站点下新建站点进行配置,其中站点选项和服务器选项都要配置. 3.然后在Dreamweaver中 ...

  3. ToString()、Convert.ToString()、(string)、as string 的区别

    通常 object 到 string 有四种方式(假设有object obj):obj.ToString().Convert.ToString().(string)obj.obj as string. ...

  4. vue中的计算属性中的坑,

    new Vue({ el: '#app', data: { msg:'121', val: '', }, computed:{ val:function(){ return 3; } }, }); 这 ...

  5. PowerPoint’s Menu is Too Big

    转自: http://jdav.is/2016/08/31/powerpoints-menu-is-too-big/ It seems that when Microsoft deployed the ...

  6. neo4j---删除关系和节点

    本文转载自:https://blog.csdn.net/chenjf0221/article/details/70238695 删除节点和节点关系 MATCH (a:key)-[r:KEY_WORD] ...

  7. db2报错: [DB2/NT] SQL0952N 由于中断,处理被取消 SQLSTATE=57014

    DB2被中断,报错:  [DB2/NT] SQL0952N 由于中断,处理被取消 SQLSTATE=57014 在DB2的开发过程中,今日运行了一个执行时间较为长的sql语句.使用DB2服务端的控制台 ...

  8. 数据库SQL语言学习--上级练习1(数据查询)

    上机练习1 1.              启动SQL Server 2008中的 SQL Server Management Studio. 2.              创建数据库Student ...

  9. [转][easyui]右键菜单

    来自:Zephyr.Net开发手册 var $tab = $('#tabs'); var currentTab = $tab.tabs('getSelected'); var titles = wra ...

  10. H5移动端开发vue+vux

    项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue             渐进式 JavaScript 框架   http://cn.vuejs.org/v2/guide/2: ...