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

在linear-gradient段内可以见到各种浏览器支持提示,Firefox Chrome完美效果,IE8以下效果不怎么样, 如果IE采用css3pie.com的htc插件应该会好一些。

点击这里查看效果

代码如下:

 <style>body,html{
height:100%; width: 100%;
}
body{
font-size: 100%;
background-color: #ddd;
color: #524d46;
text-align: center;
} .circlegraph {display: block; width: 12em; height: 12em; border-radius: 50%; box-shadow: .30em .375em .625em rgba(0,0,0,.25) inset, 0em 0em 1.25em rgba(0,0,0,.2) inset; position: absolute; left: 50%; top: 50%; margin-left: -6em; margin-top: -6em; background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */ }
/* keleyi.com */
.circlegraph:after {display: block; content: ""; width: 8em; height: 8em; background-color: #f9f8f4; border-radius: 50%; position: absolute; left: 2em; top: 2em; box-shadow: 0 0 1em rgba(0,0,0,.25);} .white {margin-left:-500px;}
.blue {background-color: #26b7ff;margin-left:-250px;}
.orange {background-color: #ff9300;margin-left:0px;}
.red {background-color: #DE6040;margin-left:250px;}
.above:after {display: block; content: ""; width: 4em; height: 4em; background-color: #fff; border-radius: 50%; position: absolute; left: 4em; top: 4em; box-shadow: 0.1em 0.4em 0.5em rgba(0,0,0,.25);z-index: 1;}</style> <div>
<a href="http://keleyi.com/a/bjac/4dc3diua.htm">原文</a></div>
<div class="circlegraph white"></div>
<div class="circlegraph orange"></div>
<div class="circlegraph blue"></div>
<div class="circlegraph red"><div class="above"></div></div>

转载自:http://keleyi.com/a/bjac/4dc3diua.htm

web前端:http://www.cnblogs.com/jihua/p/webfront.html

CSS制作凹环特效的更多相关文章

  1. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  2. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  3. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. CSS制作照片墙

    资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: <!DOCTYPE html> <htm ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. jQuery - 制作非缘勿扰页面特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  9. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

随机推荐

  1. MongoDB 之C#实践

    官方驱动:https://github.com/mongodb/mongo-csharp-driver/downloads.下载后,还提供了一个酷似msdn的帮助文档. samus驱动:https:/ ...

  2. CI Weekly #3 | 关于微服务、Docker 实践与 DevOps 指南

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  3. iOS-----写一个规范的单例--->

    1.集成了一个宏 2.两句代码集成单例 3.一句代码调用单例 -------------> 1.集成了一个宏 //这里就要注意了,因为每个单例中,方法名可以不一样,那么我们就不能把名字写死,要灵 ...

  4. CRM/ERP 企业管理软件中常见的七种程序设计模式

    管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1  RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...

  5. SQL Server中CTE的另一种递归方式-从底层向上递归

        SQL Server中的公共表表达式(Common Table Expression,CTE)提供了一种便利的方式使得我们进行递归查询.所谓递归查询方便对某个表进行不断的递归从而更加容易的获得 ...

  6. canvas学习笔记一

    为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

  7. Linux常用网络命令

    1.tracepath tracepath追踪出到指定的目的地址的网络路径,并给出在路径上的每一跳(hop).如果你的网络有问题或是慢了,tracepath可以查出网络在哪里断了或是慢了. 命令格式: ...

  8. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  9. JavaScript之糟粕

    0.导言 在上篇<JavaScript之毒瘤>中,列举了一些在JavaScript中难以避免的问题特性.本篇将会展示JavaScript中有问题的特性,但我们很容易就能便面它们.通过这些简 ...

  10. 开发中常用js记录(二)

    (1)获得asp.net控件的value值 document.getElementById('<%=SUKid.ClientID %>').value (2)获得选中值 $('#selec ...