css3怎么画出斜面的四色空心圆环

html-css025

css3怎么画出斜面的四色空心圆环,第1张

<!DOCTYPE html>

<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个图片来实现效果最简单快捷

戳我获取 完整源码