百度有啊 CSS圆角实现代码_ Div+Css教程-查字典教程网
百度有啊 CSS圆角实现代码
百度有啊 CSS圆角实现代码
发布时间:2016-12-27 来源:查字典编辑
摘要:看代码吧:XHTML代码:圆角一CSS代码:.box1{background:url(images/bg1.gif)repeat-x#1d6...

看代码吧: XHTML 代码:

<div> <span></span><span></span>

<div>

<p>圆角一</p>

</div>

<span></span><span></span>

</div>

CSS 代码:

.box1 {

background:url(images/bg1.gif) repeat-x #1d6cb7;

margin-top:1em;

position:relative;

zoom:1;

width:778px;

}

.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {

width:5px;

height:5px;

position:absolute;

background:url(images/bg3.gif) no-repeat;

overflow:hidden;

}

.box1 .cc {

height:40px;

padding:5px;

}

.box1 .tl {

left:0;

top:0;

}

.box1 .tr {

right:0;

top:0;

background-position:0 -5px;

}

.box1 .bl {

left:0;

bottom:0;

background-position:0 -10px;

}

.box1 .br {

right:0;

bottom:0;

background-position:0 -15px;

}

看看上面代码所用到的图片能更好的理解(下面):

第一部分是左上角的,第二部分是右上角的,第三部分是左下角的,第四部分是右下角的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>百度有啊css圆角方案</title><style>.box1{background:url('/html/css_yuanjiao/http://demo.jb51.net/html/css_yuanjiao/bg1.gif') repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;}.box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {width:5px;height:5px;position:absolute;background:url('http://demo.jb51.net/html/css_yuanjiao/bg3.gif') no-repeat;overflow:hidden; }.box1 .cc{height:40px; padding:5px;}.box1 .tl {left:0;top:0;}.box1 .tr {right:0;top:0;background-position:0 -5px;}.box1 .bl {left:0;bottom:0;background-position:0 -10px;}.box1 .br {right:0;bottom:0;background-position:0 -15px;}.box2{border:1px solid #84cedd;margin-bottom:.8em;position:relative;zoom:1;width:778px;}.box2 .tl,.box2 .tr,.box2 .bl,.box2 .br {width:6px;height:6px;position:absolute;background:url('http://demo.jb51.net/html/css_yuanjiao/bg_co1.gif') no-repeat;overflow:hidden;}.box2 .cc{height:40px; padding:5px;}.box2 .tl {left:-1px;top:-1px;}.box2 .tr {right:-1px;top:-1px;background-position:0 -6px;}.box2 .bl {left:-1px;bottom:-1px;background-position:0 -12px;}.box2 .br {right:-1px;bottom:-1px;background-position:0 -18px;}.box3{position:relative;zoom:1;padding:1em 1.5em;margin:.5em 0 1em 0; background:#f1f6de}.box3 .tl,.box3 .tr,.box3 .bl,.box3 .br {width:5px;height:5px;position:absolute;background:url('http://demo.jb51.net/html/css_yuanjiao/bg_co2.gif') no-repeat;overflow:hidden;}.box3 .cc{height:40px; padding:5px;}.box3 .tl {left:0;top:0;}.box3 .tr {right:0;top:0;background-position:0 -5px;}.box3 .bl {left:0;bottom:0;_bottom:-1px;background-position:0 -10px;}.box3 .br {right:0;bottom:0;_bottom:-1px;background-position:0 -15px;}</style></head><body><div><span></span><span></span><div><p>圆角一</p></div><span></span><span></span></div><p></p><div><span></span><span></span><div><p>圆角二</p></div><span></span><span></span></div><p></p><div><span></span><span></span><div><p>圆角三</p></div><span></span><span></span></div></body></html>

提示:您可以先修改部分代码再运行

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类