css圆角与阴影,[ie-css3.htc文件需要下载]

最新推荐文章于 2021-08-03 23:36:46 发布

weixin_33924770

最新推荐文章于 2021-08-03 23:36:46 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/iz100/archive/2012/09/18/2689940.html

本文介绍如何使用CSS实现带有圆角和阴影效果的盒子。通过兼容不同浏览器的CSS属性，如-moz-border-radius、-webkit-border-radius及-moz-box-shadow等，确保了样式的一致性和良好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{margin:0; padding:0;}
/*圆角、阴影、透明度*/
.box {
    margin-left:50px;
    margin-top:50px;
    width:300px; height:300px;
    background:#eee;

    /*下面是圆角*/
    -moz-border-radius: 12px; /* Firefox */
    -webkit-border-radius: 12px; /* Safari and Chrome */
    border-radius: 12px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

    /*下面是阴影*/        /*box-shadow参数对应[x偏移,y偏移,模糊度,阴影颜色][x与y偏移可取负值]IE不支持负值*/
    -moz-box-shadow: 3px 3px 3px #000; /* Firefox */
    -webkit-box-shadow: 3px 3px 3px #000; /* Safari and Chrome */
    box-shadow: 3px 3px 3px #000;/* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

    /*ie圆角与阴影需要此文件*/    /*下面可以兼容ie文件,需在服务器上才能执行*/
  behavior: url(http://iz100.com/ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
</style>
</head>

<body>
<div class="box"></div>
</body>
</html>