[前端CSS高频面试题]如何画0.5px的边框线(详解)

简介: [前端CSS高频面试题]如何画0.5px的边框线(详解)

思路

               首先  直接这样设置


 border: 0.5px solid red;

               0.5px的边框,肯定是不对的,边框大小会向上取整。


           box-shadow阴影实现的思路

                     既然border不能设置小数的边框,那我们能不能找一个属性有相似的效果来替代它呢,当然可以,我们可以用box-shadow属性用阴影达到0.5px的边框效果,box-shadow阴影属性是允许小数值的,我们可以用它达到单条边框和四条边框。


            ::after定位伪类实现的思路

               直接设置伪类元素,设置指定的高度,通过定位来控制位置。


           transform 缩放实现的思路

                       我们可以设置任意大小的边框,改变中心点,通过缩放效果(找好倍率)来达成想要的结果。


           border-image: linear-gradient 边框线性渐变的思路

                        同样设置任意大小的边框,通过渐变属性改变一部分边框的颜色效果,比如将一部分边框融入背景,这样就能得到想要的效果。


答案

             


           box-shadow阴影实现的答案

                 


 </div><div>        div {</div><div>            box-sizing: border-box;</div><div>            background-color: blueviolet;</div><div>            width: 200px;</div><div>            height: 200px;</div><div>            margin: 100px auto;</div><div>            /* border: 1px solid red; */</div><div>            box-shadow: 0px 0px 0px 0.5px green;</div><div>        }</div><div>    

 


       

          ::after定位伪类实现的答案

             


</div><div>        div {</div><div>            position: relative;</div><div>            box-sizing: border-box;</div><div>            background-color: blueviolet;</div><div>            width: 200px;</div><div>            height: 200px;</div><div>            margin-top: 10px;</div><div>            /* box-shadow: 0px 0px 0px 0.5px green; */</div><div>        }</div><div>        div::after {</div><div>            position: absolute;</div><div>            content: "";</div><div>            background-color: red;</div><div>            width: 100%;</div><div>            height: 0.5px;</div><div>            bottom: 0px;</div><div>        }</div><div>    

 


             


           transform 缩放实现的答案

             


</div><div>        div {</div><div>            position: relative;</div><div>            box-sizing: border-box;</div><div>            background-color: blueviolet;</div><div>            width: 200px;</div><div>            height: 200px;</div><div>            margin-top: 10px;</div><div>            /* box-shadow: 0px 0px 0px 0.5px green; */</div><div>        }</div><div>        div::after {</div><div>            position: absolute;</div><div>            content: "";</div><div>            width: 200%;</div><div>            height: 200%;</div><div>            border: 1px solid red;</div><div>            transform-origin: 0 0;</div><div>            transform: scale(0.5);</div><div>        }</div><div>    

 


             


           border-image: linear-gradient 边框线性渐变的答案    

               


 </div><div>        div {</div><div>            position: relative;</div><div>            box-sizing: border-box;</div><div>            background-color: blueviolet;</div><div>            width: 200px;</div><div>            height: 200px;</div><div>            margin-top: 10px;</div><div>            /* box-shadow: 0px 0px 0px 0.5px green; */</div><div>        }</div><div>        div::after {</div><div>            display: block;</div><div>            position: absolute;</div><div>            content: "";</div><div>            width: 100%;</div><div>            height: 1px;</div><div>            bottom: 0px;</div><div>            background-color: red;</div><div>            background: linear-gradient(to bottom, transparent 50%, red 50%);</div><div>        }</div><div>    

 




理解

           box-shadow阴影实现的理解

                       这种方法完全借助盒子阴影来达到指定效果,通过0.5px的阴影,让它达到类似0.5px边框的效果。


            ::after定位伪类实现的理解

                       这种方法直接设置0.5px的高度,高度同样允许小数px,我们生成了一个新元素,来改变它的高度,让它充当边框。


           transform 缩放实现的理解

                       利用缩放属性,我们设置一个1px边框,长度和宽度设置为被包裹子元素的两倍,当它缩小0.5的时候,就正好变成了子元素的宽高,1px的边框也缩小了一半变成了0.5px


           border-image: linear-gradient 边框线性渐变的理解    

                        这个其实是第二种属性的复杂版了,没有直接设置0.5px,而是设置了1px1上上面一半透明,来达到0.5px的边框效果,我们也可以直接设置1px的边框,然后同样透明0.5px,这个就不演示了。(这个属性有点复杂 后面会讲一下)


总结

                       第一二 四种没有使用border属性,通过其他属性来达到类似的边框效果,第三种使用了边框然后进行了效果的修改,第四种也有边框效果的变种写法。


相关文章
|
22天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
57 1
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
3月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
1月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
1月前
|
前端开发 小程序 JavaScript
面试官:px、em、rem、vw、rpx 之间有什么区别?
面试官:px、em、rem、vw、rpx 之间有什么区别?
42 0
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
52 2
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
39 0
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
3月前
|
存储 JavaScript 前端开发
|
3月前
|
前端开发
css中px和em的区别
css中px和em的区别
61 0