京东面试-0.5像素的边框

最新推荐文章于 2024-03-06 10:13:29 发布

liugang0605

最新推荐文章于 2024-03-06 10:13:29 发布

阅读量987

点赞数

文章标签：面试京东 css3

本文链接：https://blog.csdn.net/power8988/article/details/73810604

版权

英语专八转前端，还没踏入工作岗位，在家学习ing。
在京东面试，有道题是写出0.5像素的边框；
正好看过。凭印象写出来了；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MovingBall</title>
    <style>
        div{
            width:100px;
            height:100px;
            position: relative;
            background:#ddd;
        }
        div:before{
            content:"";
            width:200%;
            height:200%;
            border:1px solid #e4393a;
            position:absolute;
            transform-origin: 0 0;
            transform:scale(.5,.5);
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

但是这里没写出来的是，毕竟transform是c3，存在兼容性问题，所以还需要针对不同浏览器加前缀；

        -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
       transform-origin: 0 0;
       -webkit-transform: scale(0.5, 0.5);
       -ms-transform: scale(0.5, 0.5);
       -o-transform: scale(0.5, 0.5);
       transform: scale(0.5, 0.5);

liugang0605

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
京东面试-0.5像素的边框

在京东面试，有道题是写出0.5像素的边框；正好看过。凭印象写出来了；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MovingBall</title> <style> div{ width:100px; height
复制链接

扫一扫