CSS3 径向渐变 radial-gradient

来源：互联网发布：软件系统验收规范编辑：程序博客网时间：2024/05/29 09:10
代码：
<span style="font-size:18px;color:#000099;"><!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS3 径向渐变</title>    <style type="text/css">*{margin:0;padding:0;}ul *{width:200px;height:200px;margin:10px;float:left;}li{list-style:none;}li:nth-child(1){background: -ms-radial-gradient(top,#ccc,#000);background: -webkit-radial-gradient(top,#ccc,#000);background: -o-radial-gradient(top,#ccc,#000);background: -moz-radial-gradient(top,#ccc,#000);}li:nth-child(2){background: -ms-radial-gradient(left,#ace,#f96);background: -webkit-radial-gradient(left,#ace,#f96);background: -o-radial-gradient(left,#ace,#f96);background: -moz-radial-gradient(left,#ace,#f96);}li:nth-child(3){background: -ms-radial-gradient(top,#ace,#f96);background: -webkit-radial-gradient(top,#ace,#f96);background: -o-radial-gradient(top,#ace,#f96);background: -moz-radial-gradient(top,#ace,#f96);}li:nth-child(4){background: -ms-radial-gradient(top left,#ace,#f96);background: -webkit-radial-gradient(top left,#ace,#f96);background: -o-radial-gradient(top left,#ace,#f96);background: -moz-radial-gradient(top left,#ace,#f96);}li:nth-child(5){background: -ms-radial-gradient(left,#ace,#f96,#ace,#f96,#ace);background: -webkit-radial-gradient(left,#ace,#f96,#ace,#f96,#ace);background: -o-radial-gradient(left,#ace,#f96,#ace,#f96#,#ace);background: -moz-radial-gradient(left,#ace,#f96,#ace,#f96,#ace);}    </style></head><body><ul>    <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></body></html></span>
效果图：
0 0