[英]Border-radius and box-shadow CSS is not working as I'd like
我在創建這個布局時遇到了一些問題。
演示 。
這是我的代碼:
<!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>
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
解決方案演示
將border-radius
和box-shadow
直接應用於圖像並刪除背景,如下所示:
img{
border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.