css实现图片圆角 兼容所有浏览器实现代码
发布时间:2012-12-06 10:34:19 作者:佚名 我要评论
今天处理了一个页面刷新随机显示图片的功能,发现直角太丑,想实现图片圆角,兼容所有浏览器,于是网上搜集整理了一下,拿出来和大家分享
今天处理了一个页面刷新随机显示图片的功能,发现直角太丑,想实现图片圆角,本来想用php实现的,但是有点麻烦,发现了一个很好的css解决方案,立马用上:
css实现图片圆角,兼容所有浏览器:
<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*/
/*圆角框通用设置样式,如果要运用多个不同颜色,以下部分不用重新变化--------------------------------*/
.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实现图片圆角,兼容所有浏览器:
复制代码
代码如下:<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*/
/*圆角框通用设置样式,如果要运用多个不同颜色,以下部分不用重新变化--------------------------------*/
.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实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中,下面是一个权衡的相对结构干净,CSS简单的解决方法2013-04-17
- 浏览网页时经常会碰到图文并茂的文章,如果图片的尺寸过大,常会把页面结构撑得变形直接影响了界面美观度,一直用DIV+CSS的方式来制作页面,发现用CSS来得更方便,相信处理2013-03-28
一个新的CSS图片替换的技巧(背景显示与文本移离屏)告别9999px
-9999 px的形象替代技术已经流行了一个十年最好的部分。一项新技术已被发现,可以提高性能,因为浏览器的不再画一个9999 px箱在幕后2012-12-30- 无需flash,完全用css就可以做出超炫的图片倒影效果,大伙不要不信;网上流传很多种版本,经过本人的一番研究,做成能够兼容firefox、chrome、IE等各主流浏览器的版本,跟大2012-12-27
- 有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片,需要的朋友可以了解下2012-12-19
- 看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢2012-01-21
- CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了2012-01-21
- CSS图片提取工具,是我为了方便制作网站而编写的一个小巧的工具。它功能单一,但可以省去不少的麻烦2011-10-09
- 如今DIV+CSS的网站设计成为主流,越来越的图片不直接插在HTML中而选择用CSS来展示了,这为仿站带来很大的困难。2011-09-20
- 动画效果的CSS图片导航菜单特效,鼠标放到图片上,会出现菜单提示,因为是用CSS实现的动画效果,所以流畅度当然没有JavaScript和Flash的效果好,仅供参考。2010-11-18
最新评论