百度有啊CSS圆角实现代码资源-CSDN文库

89 浏览量 2020-12-02 22:23:13 上传评论收藏 27KB PDF 举报

资源详情

资源评论

资源推荐

百度有啊百度有啊 CSS圆角实现代码圆角实现代码

看代码吧： XHTML 代码：

复制代码代码如下:

<div class=”box1″> <span class=”tl”></span><span class=”tr”></span>

<div class=”cc”>

<p>圆角一</p>

</div>

<span class=”bl”></span><span class=”br”></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;

}

看看上面代码所用到的图片能更好的理解（下面）：

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

<br>

<!DOCTYPE html

PUBLIC “-//W3C//DTD

XHTML 1.0

Transitional//EN”

“http://www.w3.org/TR/xh

tml1/DTD/xhtml1-

transitional.dtd”><br>

<html

xmlns=”http://www.w3.or

g/1999/xhtml”><br>

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

内容反馈

weixin_38714641

粉丝: 1
资源: 949

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip