Border-radius和box-shadow CSS不能正常工作

Question

我在创建这个布局时遇到了一些问题。

这是我的代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <div class="row " style="">
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150">
              </div>

            </div>
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150"></div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150"></div>

            </div>
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150"></div>

            </div>
        </div>



    </body>
</html>

CSS

body{
  background-color:#99B3FF;
}  
.news_basic_style{
  border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);

}

.news_basic_style{
  background-color:white;
  width:170px;
  margin:20px;
}

我想要的和我拥有的截图

更新感谢编辑TRiG

解决方案演示

Answer 1

将border-radius和box-shadow直接应用于图像并删除背景，如下所示：

img{
    border-radius: 20px; 
    box-shadow:5px 5px 10px rgba(0,0,0,0.65);    
}

http://jsfiddle.net/LrmfU/

Border-radius和box-shadow CSS不能正常工作

问题描述

HTML

CSS

1 个解决方案

解决方案1
2 已采纳 2014-02-27 19:52:54

Border-radius和box-shadow CSS不能正常工作

问题描述

HTML

CSS

1 个解决方案

解决方案1 2 已采纳 2014-02-27 19:52:54

解决方案1
2 已采纳 2014-02-27 19:52:54