CSS3+DIV圆角、投影、颜色渐变效果（兼容IE、火狐、chrome浏览器）

---

String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>








My JSP 'test.jsp' starting page










.ok{
border: 1px solid #696;
padding: 10px 0;
text-align: center; 
width: 200px;

/**
div圆角效果
*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

/**
投影效果
*/
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px; 


  background: #EEFF99;


/**
背景颜色渐变效果
*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); 

behavior: url(css/PIE.htc);/**
这行很重要，没有它的话，ie将无法显示这种效果
PIE.htc文件在    http://css3pie.com/download-latest  下载
*/
}

圆角的，测试用的

---

上述文件时JSP文件，课选择html标签内的部分保存为html文件，效果一样。
最后的效果是：


PIE.htc下载地址：
PIE.zip

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29658625/viewspace-1166072/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29658625/viewspace-1166072/