尝试在ie8上实现纯css的圆角

纯css实现在ie8下的圆角

本文可以说几乎没有什么意义，是突然来的一个ie8下圆角矩形的纯css实现思路，我只在chrome下实现了，但是和系统字体有很大的关联，导致各种问题，有兴趣的可以看看：

大致流程图如下(忽略图片中间的水印):

（1）创建一个矩形，我创建的是带有左右边框的矩形，大致如下：

（2）在矩形的四个角，如下图的位置加上四个圆，当然，圆也是黑色的，但是有人可能要问，ie8连圆角都没有，哪来的圆，这里就是关键所在，用英文字符中的句号来制作圆，当然，需要超大的字体。调整好位置后效果如下：

（3）再来个如下图所示的矩形，颜色也要是黑色的，那么圆角矩形就做完了

上述过程看起来貌似简单，但是问题还是挺多的，最大的问题是不同浏览器的英文句号位置大小都是不一样的，即使字体以及字体大小一样的情况下也是如此

直接上我的源码（以下的各个参数是我在我的ubuntu下的chrome里调的，其他机器，其他系统，其他浏览器得重新调整，希望有人可以整理出统一的方案）：

  asdasdasddddddddddddddddddddddddddddddddddsaaadasdasd

*{
  margin: 0;
  padding:0;
  font-family: Georgia, serif;
}
body{
  padding: 10px;
}
.radius{
  position: relative;
  width: 11em;
  height: 10em;
  margin: 2em 0;
  background-color: #000;
  color:#fff;
  border-width: 0 1.99em;
  border-style: solid;
  border-color: #000;
  word-wrap: break-word;
}
.radius:after{
  content: '';
  position: absolute;
  top: -1.96em;
  left: 0;
  display: block;
  width: 11em;
  height: 10em;
  color: #fff;
  border-width: 1.99em 0;
  border-style: solid;
  border-color: #000;
}
.radius:before{
  content: "....";
  position: absolute;
  top: -0.447em;
  left: -0.126em;
  z-index: -1;
  display: block;
  width: 0.7em;
  height: 0.3125em;
  font-size: 3200%;
  line-height: 0.3125em;
  letter-spacing: 0.096em;
  color: #000;
  word-wrap: break-word;
}

最后在我的chrome里显示如下:

很nice的效果，读者可以读一下源码，然后在自己的浏览器上调整各个参数，也会获得这样的效果。

注意，虽然是chrome下面实现的，但是css代码用的全是ie8所支持的，如果不用伪类(after和before)，那么，还可以支持ie7,甚至ie6，只要字体里有圆点的符号就行。