巧用border属性兼容ie8圆角问题

1.border-radius可以实现css中的圆角样式,但不支持IE8及以下版本

2.border属性有三个参数:宽度   、样式、   颜色;

3.而其中样式又包括三种: solid(实线)、 dotted (点划线)、  dashed(虚线);

4.IE中dotted(点划线)和其他浏览器的不一样,放大了看是圆,现在读到这是不是应该有想法了;

5.实例代码:

<style>

.box {

             margin-top: 200px;

             position:relative;

}

.radius {

             width: 100%;

             height: 100%;

             border: 100px dotted red;

         }

         .box1 {

             width: 120px;

             height: 218px;

             position: absolute;

             left:40px;

             top:-100px;

             background-color: red;

             border:1px 

         }

         .box2 {

             width: 200px;

             height: 120px;

             position: absolute;

             left:0;

             top:-50px;

             background-color: red;

         }

</style>

<div class=”box”>

    <i class=”radius”></i>

    <div class=”box1″></div>

    <div class=”box2″></div>

</div>

</body>
6.border还有一个double属性,可以用来实现菜单栏三道杠;

.double {

    width: 120px;

    height: 20px;

    border-top: 60px double;

    border-bottom: 20px solid;

}

<p class=”double”></p>

欢迎分享本文,转载请保留出处:前端ABC » 巧用border属性兼容ie8圆角问题

分享到:更多 ()

发表评论 0