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;
}

Screenshot of what I want and what I have

更新感谢编辑TRiG

解决方案demo：

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 个答案: