<html>
<head>
<meta charset="utf-8">
<title>四色空心圆环</title>
<style>
*{ padding:0margin:0font-size:14px }
/* 第一种 */
.wai{ width: 360pxheight: 360pxposition: relativemargin: 120px autoborder-radius: 50%overflow:hidden }
.nei{ width: 160pxheight: 160pxline-height:160pxtext-align:centerbackground-color: #FFFborder-radius: 50%position: absolutemargin: autoleft:0right:0top:0bottom:0 }
.wai .fx{ width: 100%height:100%position:absolutetransform:rotate(45deg) }
.top{ background: #FF00FFwidth: 180pxheight:180pxposition: absolutetop:0left:0 }
.right{ background: #7B4DB1width: 180pxheight:180pxposition: absolutetop:0right:0 }
.bottom{ background: #1AA260width: 180pxheight:180pxposition: absolutebottom:0right:0 }
.left{ background: #20647Dwidth: 180pxheight:180pxposition: absolutebottom:0left:0 }
/* 第二种 */
.ease{
width: 360pxheight: 360pxmargin: 120px autoborder:100px solid redborder-radius:50%overflow:hidden
box-sizing:border-boxline-height:160pxtext-align:center
border-top-color: #FF00FFborder-right-color: #7B4DB1border-bottom-color: #1AA260border-left-color: #20647D
}
</style>
</head>
<body>
<!-- 第一种 -->
<div class="wai">
<div class="fx">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
<div class="nei">Hello</div>
</div>
<!-- 第二种 -->
<div class="ease">Hello</div>
</body>
</html>
你可以试试2个div都设一下背景，一个模糊的放底层，清晰的放上层，通过控制清晰的那个div的位置和背景位移来达到你要的效果，或者你网上搜一下模糊滤镜的js脚本来实现，当然，如果你那个清晰的圆形的位置是固定不变的，那么你还是把这个效果用ps做成一张图是最好的，这也是最方便的，做网页设计不要纠结于技巧，能用最简单的方式达到效果是最好的方式，如果是我，我肯定就是做2个图片来实现效果最简单快捷1.有序列表：每项之间有先后顺序,默认在每项前面显示1,2,3…<ol type="A">：在每项前面显示A，B，C…
<ol type="a">：在每项前面显示a，b，c…
<ol type="I">：在每项前面显示I，II，III…
有序列表ol增加了一个属性， <ol start="50">，这样就指定了起始值从50开始
2.无序列表使用一对闭合的标签表示， <ul></ul>。内部的一项使用 <li>内容 </li>来表示。
可以通过ul标签的type属性来修改这个修饰符。
<ul type="disc">显示为一个圆点，是默认值
<ul type="circle">显示为一个空心圆圈
<ul type="square">显示为一个实体正方形
“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。
3.自定义列表
<dl>标签全称是definition list，代表“自定义列表”。 <dl>后面的l代表list，列表的意思。
<dt>标签全称是definition term，代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt>后面的t代表term，“项目”的意思。
<dd> 标签的全称是definition description，代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd>后面的d代表description，“描述”的意思。
例子：
使用 list-style-type: none
id：指定标签的唯一标识
class:指定标签的类名,class可以通过给多个元素赋予同一class，批量操作来设置css
块元素都是独立显示，把内容分割成块，是网页的主要结构模块；行内元素，即内联元素，只显示在段落的文字流中，是用来标记内容的小片段
块级元素标签 h,ul,li,ol,p,div
行内元素标签 a,em,q, img,span
页面分：头部、内容、底部,头部有三个导航栏，内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。
语义化：使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
1.<form>标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
<form name="myForm" action="/test/6.php" method="post">
name:表单提交时的名称；
action:提交到的地址，如果不写action，信息就会提交到当前页面；
method:提交方式（get和post），如果不写，默认的是get
2.常用标签：
复选框当中，可以把name值设置成一个数组，例：
<button>提交 </button> ——普通按钮，button默认是不提交任何数据，需要绑定事件才可以用提交数据
<a class="btn" href="#">提交 </a> ——链接
<input type="submit" value="提交"> ——提交按钮，提交信息到服务器
设置name值实现分组，如果name值相同，则表示它们是一组，可以实现单选。
placeholder 属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
<input type="hidden" name="identity" value="123">
