帮我看看为什么显示不出来那个效果？

按照老师的步骤来写的代码，但是我只能实现四个角的上面的左边和右边的角变成圆角，但是不能将下面的左边和右边的角变成圆角，这个是为什么？部分代码：

.l_top_radius{

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

width:4px;

height:3px;

position:absolute;

left:0;

top:0;}

.r_top_radius{

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

width:4px;

height:3px;

position:absolute;

top:0;

right:0;}

.l_btm_radius{

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

width:4px;

width:3px;

position:absolute;

bottom:0;

left:0;}

.r_btm_radius{

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

width:0;

height:0;

position:absolute;

bottom:0;

right:0;}

qq_南小开_0

2015-08-21

源自：CSS圆角进化论 2-2

关注问题我要回答

855

操作

收起

1 回答

炸猪排超人
2015-09-07

你的代码写错了，我用chrome的开发者工具给你指出来了，详细看图片。

另附正确代码如下：

.l_top_radius{
  background:url(l_top_radius.gif) no-repeat;
  width:4px;
  height:3px;
  position:absolute;
  left:0;
  top:0;
}
.r_top_radius{
  background:url(r_top_radius.gif) no-repeat;
  width:4px;
  height:3px;
  position:absolute;
  top:0;
  right:0;
}
.l_btm_radius{
  background:url(l_btm_radius.gif) no-repeat;
  width:4px;
  height:3px;  /*-----*/
  position:absolute;
  bottom:0;
  left:0;
}
.r_btm_radius{
  background:url(r_btm_radius.gif) no-repeat;
  width:4px;   /*-----*/
  height:3px;  /*-----*/
  position:absolute;
  bottom:0;
  right:0;
}