您的位置：首页 > Web前端 > CSS

如何用css3实现半像素边框

2017-06-12 20:41 253 查看
今天小编遇到一个头疼的问题，如何实现一个半（0.5）像素的边框

像一个像素的边框，我们很容易解决，直接一个border：1px solid red；就很容易实现了

那么我们直接一个border：0.5px solid red；不就解决实现0.5像素的边框问题了吗？

答案是不行的，因为border的with只能是自然数

所以我们要运用到CSS3中伪类元素来解决这一问题

思路：

1.设置目标元素作为定位参照

.connet{
position: relative;
width: 100px;height: 100px;
}


2.给目标元素添加一个伪类元素before或者after，并设置为绝对定位

.connet:after{
content: '';
position: absolute;
}


3.为伪类元素添加1px的边框

.connet:after{

border: 1px solid red;
}


4.设置伪类元素的宽高为目标元素的2倍

.connet:after{

width: 200%;height: 200%;
}


5.将伪类元素缩小0.5倍（变回目标元素的大小）

.connet:after{
transform-origin:0 0;
transform: scale(0.5,0.5);
}


6.把border包进来（意思就是先放大再缩回来，border-box是关键，否则边框不会一起缩放）

.connet:after{

box-sizing:border-box;
}


其具体代码为

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#box{   /*此元素作为参照比较*/
width: 150px;height: 150px;
border: 1px solid red;
padding: 10px;
}
.connet{
position: relative
98b1
;  /*设置目标元素作为定位参照*/
width: 100px;height: 100px;
}
.connet:after{   /*给目标元素添加一个伪类元素before或者after*/
content: '';
position: absolute;  /*设置绝对定位*/
border: 1px solid red;/*为伪类元素添加1px的边框*/
width: 200%;height: 200%;/*设置伪类元素的宽高为目标元素的2倍*/
transform-origin:0 0;    /*伪类元素缩小0.5倍（变回目标元素的大小）*/
transform: scale(0.5,0.5);
box-sizing:border-box; /*把border包进来*/
}
</style>
<body>
<div id="box">
<div class="connet">
</div>
</div>
</body>
</html>


其运行效果图如下



明显的看到实现了0.5像素边框
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航