css實現(xiàn)圖片圓角 兼容所有瀏覽器實現(xiàn)代碼
發(fā)布時間：2012-12-06 10:34:19 作者：佚名 
我要評論
我要評論今天處理了一個頁面刷新隨機顯示圖片的功能，發(fā)現(xiàn)直角太丑，想實現(xiàn)圖片圓角，兼容所有瀏覽器,于是網(wǎng)上搜集整理了一下，拿出來和大家分享
今天處理了一個頁面刷新隨機顯示圖片的功能，發(fā)現(xiàn)直角太丑，想實現(xiàn)圖片圓角，本來想用php實現(xiàn)的，但是有點麻煩，發(fā)現(xiàn)了一個很好的css解決方案，立馬用上：
css實現(xiàn)圖片圓角，兼容所有瀏覽器：
<style type="text/css">
/*通用樣式--容器寬度值*/
.sharp{width:907px;height:606px;margin-top:20px;float:left;margin-left:10px;display:inline;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:598px;}/*這個高度值等于圖片的高度值-8px*/
/*圓角框通用設(shè)置樣式，如果要運用多個不同顏色，以下部分不用重新變化--------------------------------*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*圖片偏移定位--上面部分*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}
/*圖片偏移定位--下面部分*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}
/*顏色方案一----------------------------------------*/
/*邊框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#dce4f5;}
.color1 .b1,.color1 .b8{background:#dce4f5}
/*圖片路徑*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(http://www.phpddt.com/usr/uploads/2012/10/4085139866.png) no-repeat;}
.color1 .content{background-position:left -4px;}
</style>
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
效果圖如下：
css實現(xiàn)圖片圓角，兼容所有瀏覽器：
復(fù)制代碼
代碼如下:<style type="text/css">
/*通用樣式--容器寬度值*/
.sharp{width:907px;height:606px;margin-top:20px;float:left;margin-left:10px;display:inline;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:598px;}/*這個高度值等于圖片的高度值-8px*/
/*圓角框通用設(shè)置樣式，如果要運用多個不同顏色，以下部分不用重新變化--------------------------------*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*圖片偏移定位--上面部分*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}
/*圖片偏移定位--下面部分*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}
/*顏色方案一----------------------------------------*/
/*邊框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#dce4f5;}
.color1 .b1,.color1 .b8{background:#dce4f5}
/*圖片路徑*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(http://www.phpddt.com/usr/uploads/2012/10/4085139866.png) no-repeat;}
.color1 .content{background-position:left -4px;}
</style>
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
效果圖如下：
相關(guān)文章
css圖片垂直居中 css中如何實現(xiàn)圖片垂直居中
使用純CSS實現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中，下面是一個權(quán)衡的相對結(jié)構(gòu)干凈，CSS簡單的解決方法2013-04-17- 瀏覽網(wǎng)頁時經(jīng)常會碰到圖文并茂的文章,如果圖片的尺寸過大，常會把頁面結(jié)構(gòu)撐得變形直接影響了界面美觀度，一直用DIV+CSS的方式來制作頁面，發(fā)現(xiàn)用CSS來得更方便，相信處理2013-03-28
一個新的CSS圖片替換的技巧(背景顯示與文本移離屏)告別9999px
-9999 px的形象替代技術(shù)已經(jīng)流行了一個十年最好的部分。一項新技術(shù)已被發(fā)現(xiàn),可以提高性能,因為瀏覽器的不再畫一個9999 px箱在幕后2012-12-30- 無需flash，完全用css就可以做出超炫的圖片倒影效果,大伙不要不信；網(wǎng)上流傳很多種版本，經(jīng)過本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大2012-12-27
純CSS圖片預(yù)加載實例 擺脫Javascript預(yù)載的束縛
有很多種方法來實現(xiàn)圖片的預(yù)加載，通常大部分使用Javascript讓事情滾動。不要再受Javascript預(yù)載的束縛了吧，用CSS你就可以毫不麻煩的預(yù)載你的圖片,需要的朋友可以了解下2012-12-19- 看到問此問題的很多，所以花點時間整理下，歡迎大家提意見，做補充修改，謝謝2012-01-21
- CSS圖片垂直居中問題，困擾了我許久，今天終于可以總結(jié)下來了2012-01-21
CSS圖片提取工具，是我為了方便制作網(wǎng)站而編寫的一個小巧的工具。它功能單一，但可以省去不少的麻煩2011-10-09
華華CSS圖片下載器 v1.1 網(wǎng)站必備的小工具
如今DIV+CSS的網(wǎng)站設(shè)計成為主流，越來越的圖片不直接插在HTML中而選擇用CSS來展示了，這為仿站帶來很大的困難。2011-09-20
動畫效果的CSS圖片導(dǎo)航菜單特效，鼠標(biāo)放到圖片上，會出現(xiàn)菜單提示，因為是用CSS實現(xiàn)的動畫效果，所以流暢度當(dāng)然沒有JavaScript和Flash的效果好，僅供參考。2010-11-18
