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

纯css实现在ie8下的圆角

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

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

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



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



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



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

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

<div class="radius">
asdasdasddddddddddddddddddddddddddddddddddsaaadasdasd
</div>

*{
  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，只要字体里有圆点的符号就行。