Question

HTML

<div id='base_container'>
</div>

的CSS：

#base_container{ 
    width:970px; 
    margin:auto; 
    overflow:hidden; 
    background:#red; 
    border-radius:10px; 
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.5);
}

enter image description here

在上面的'base_container'代码中，我需要使用图像创建border-radius和box-shadow，而不是使用已存在的css3。我以前从未使用过这种技术，也应该在IE-8中正确显示。还有一件事是'base_container'高度是'auto'。我上传了一张jpg图片。请帮帮我。

Answer 1

你可以使用CSS3的力量制作圆角并创建阴影。当然，它不像张贴的图像那样精确，你必须在颜色和阴影尺寸上玩一点。

如果您支持旧浏览器，则必须使用firefox和IE

的供应商前缀

检查 DEMO 。

注意：如果您支持IE7和IE8等旧浏览器，则可以使用Modernizr这是一个检测HTML5的JavaScript库， CSS3。

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
  border-radius:4%; /*supported by all latest Browser*/
  -moz-border-radius:4%; /*For older Browser*/
  -webkit-border-radius:4%;/*For older Browser*/
  background-color:red;
  width:500px;
  height:500px;
}

Answer 2

我不明白为什么使用css图像因为有实用的跨浏览器解决方案

例如

<强> CSS

div.shadow {
    -moz-box-shadow: 3px 3px 4px #444;
    -webkit-box-shadow: 3px 3px 4px #444;
    box-shadow: 3px 3px 4px #444;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
  behavior: url(http://yoursite.com/border-radius.htc);
}

Answer 3

这就是你要找的东西

FIDDLE DEMO

 <div class="square-box">
 <div class="top"></div>
 <div class="content">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id dapibus ante. Quisque et mi felis. Mauris sollicitudin, nulla nec rutrum posuere, augue risus ultricies tortor, eu posuere velit ligula ac ipsum. Mauris tellus sem, egestas ac venenatis eu, ultricies in urna. Morbi eget faucibus justo. Cras egestas adipiscing felis, at commodo urna ultrices pulvinar. Cras iaculis, sem sit amet tincidunt adipiscing, orci orci tincidunt velit, a pellentesque sapien mauris vel est. Sed semper scelerisque ligula, in viverra risus lobortis quis. Sed sed feugiat nulla. Aenean dignissim dolor eget nibh mattis, quis mattis eros ultrices. Sed hendrerit vel lorem vel gravida. Cras neque urna, egestas eu varius id, tempor sit amet magna. Aenean consequat porttitor ante, vel dictum tortor tristique a. Cras in purus sed nisl lacinia pulvinar.

 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc non vehicula ligula. Pellentesque fringilla sem non eros interdum, id venenatis enim condimentum. Nam ac suscipit libero. Nullam ultrices, felis eu placerat euismod, erat est posuere lacus, quis volutpat eros velit sit amet mi. Aliquam libero erat, aliquam in fringilla quis, egestas interdum lorem. Nunc at lobortis tellus. Aenean lorem urna, bibendum eu faucibus id, tincidunt non est.
 </div>
 <div class="bottom"></div>
 </div>

 .square-box{width:600px;}
 .square-box .top{background:url('http://i.imgur.com/KRjgdhP.jpg') no-repeat 0 0; height:27px; float:left; width:100%;}
 .square-box .content{background:url('http://i.imgur.com/zjNrRfD.jpg') repeat-y 0 0; min-height:100px; padding:0 5%;  float:left; width:90%;}
 .square-box .bottom{background:url('http://i.imgur.com/mOXsXSQ.jpg') no-repeat 0 0;  height:27px;  float:left; width:100%;}

Answer 4

为旧浏览器执行此操作的最简单（旧）方法是将您的图像转换为photoshop，

切片所有角落，包括阴影，半径和一些内在的颜色..确保它们的大小相同..
切割顶部，右侧，左侧和底部阴影，确保每个阴影是高度或宽度作为对应的角..（例如：左阴影的宽度与左上角和左下角的宽度相同角）

制作HTML TABLE：

<table>
    <tr>
        <td><img src="topleftcorner" /></td>
        <td style='background:url(img/topshadow.png) repeat-x 0 0'>&nbsp;</td>
        <td><img src="toprightcorner" /></td>
    </tr>
    <tr>
        <td style='background:url(img/leftshadow.png) repeat-y 0 0'></td>
        <td class='content'>HERE GOES THE CONTENT OF THE BOX</td>
        <td style='background:url(img/rightshadow.png) repeat-y 0 0'></td>
    </tr>
    <tr>
        <td><img src="bottomleftcorner" /></td>
        <td style='background:url(img/bottomshadow.png) repeat-x 0 0'>&nbsp;</td>
        <td><img src="bottomrightcorner" /></td>
    </tr>
</table>

当然，你需要相应地设计宽度和高度的样式。 .content会有盒子内部颜色的背景颜色..

创建圆角Div也有一个盒子阴影

4 个答案: