他百度空间的各项标题边框为什么棱角分明？

html-css014

他百度空间的各项标题边框为什么棱角分明？,第1张

你这个问题是这样的：

1）小版块的边框都有小白角，其原因就是图片的问题，你自己看一下：

.modtl{background:url(http://img.baidu.com/hi/temp1/ptitl.gif) no-repeat top leftline-height:1px}

.modtc{background:url(http://img.baidu.com/hi/temp1/ptitc.gif) repeat-x}

.modtr{background:url(http://img.baidu.com/hi/temp1/ptitr.gif) no-

里面的

http://img.baidu.com/hi/temp1/ptitl.gif 表示模块左上图；http://img.baidu.com/hi/temp1/ptitc.gif 表示模块中上图；http://img.baidu.com/hi/temp1/ptitr.gif 表示模块右上图

也就是说，每一条”蓝色边框”都是由这三个图组成的，分别代表”左 中 右”，为什么有小白角呢？你仔细看看代表左右的两个图就清楚了，就是图的原因， 要把小白角去掉，很简单，因为中间那个图是完整的长方形，你把左右图都换成中间这个http://img.baidu.com/hi/temp1/ptitc.gif 就OK了．

2）同样道理，底边的白条是由这个决定的：

.modbl{background-color:#FFFFFF line-height:1px}

.modbc{background-color:#FFFFFF line-height:1px}

.modbr{background-color:#FFFFFF line-height:1px}

从上至下分别代表模块的左下角、中下、右下角的图，也就是说底边的白条是由他们组成的（#FFFFFF 代表白色），你要删除白条，只要把他们删除就可以了。

3）总结：可以把你的模块部分删除就可以了

借用了上述朋友的内容

希望能更清楚地回答你

附的图片是背景图片，不是效果图哈，效果请将以下代码保存成html，然后修改背景图片路径看效果，祝你好运~~

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8">

<title>滑动门</title>

<style type="text/css">

ul,li{margin:0padding:0list-style:none}

.list .item{float:left}

.list a{float:leftheight:29pxpadding-left:12pxbackground:url(img01.jpg) no-repeat left top}

.list span{float:leftheight:29pxline-height:29pxpadding-right:12pxbackground:url(img01.jpg) no-repeat right top}

</style>

</head>

<body>

<ul class="list">

<li class="item">

<a href="#" target="_blank">

<span>首页</span>

</a>

</li>

<li class="item">

<a href="#" target="_blank">

<span>尾dadasda页</span>

</a>

</li>

</ul>

</body>

</html>