先看兩張圖片效果對比：
這張是沒有控制的
控制后同一張圖片顯示效果：
是不是覺得好看多了呢。下面你也來試試吧
首先div布局是：
<div class="tiandi_item" onclick="javascript:location.href='#'">
<div class="tiandi_item_img"><img src="http://www.jcwbs.cn/d/file/2020-06-11/6e16020f55a8215e3c896a3e59ba668f.jpg" /></div>
<div class="tiandi_item_text ellipsis">貴州浩然義誠科技電子技術(shù)有限公司歡迎您</div>
（css文件里）加入如下樣式：
.tiandi_item{ width:160px; height:145px; background-color:#faecb2; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; text-align:center; padding-top:5px; line-height:30px; overflow:hidden; float:left; margin:0 50px 10px 0; cursor:pointer;}
.tiandi_item_img{ width:154px; height:112px; overflow:hidden;border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;}
.tiandi_item_img img{ width:100%; display: block; margin-bottom: 7px; border: 1px solid #ffd300; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;}
控制圓角主要是border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;,后面的主要是兼容webkit內(nèi)核和moz的瀏覽器，.tiandi_item_img img也要加radius是因為圖片大小不同，有的圖片上邊有圓角，下邊沒有圓角
貴公網(wǎng)安備52032102000602號