不死小强

不死小强 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

前端开发

个人动态

不死小强 回答了问题 · 1月17日

有没有vue-i18n的案例可以参考下?

我们做过国际化,一般情况没有特殊处理过,该换行换行,改撑开撑开。

关注 2 回答 2

不死小强 回答了问题 · 1月15日

前端和后端不同端口 服务器怎么配置代理

前端的baseUrl是api,nginx这样配置

location ^~ /api {
    proxy_pass localhost:3005/api/;
    proxy_set_header Host $host; 
}

关注 3 回答 2

不死小强 回答了问题 · 1月13日

解决请问为什么这个async function 堵塞了?如何让他不堵塞呢?

while (true) {
    await sleep(3000);
}

这里死循环了

关注 2 回答 2

不死小强 回答了问题 · 1月12日

vue 精度丢失如何处理啊

首先这跟vue没有关系,具体原因可以看这个js精度丢失
实际业务中设计到精确计算的,建议使用bignumber.js

关注 2 回答 2

不死小强 发布了文章 · 1月10日

如何用css写一个带斜切角、有边框又有内外阴影的按钮呢?

如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角、有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容、大小都是可变的,那得切多少图啊~CanvasSVG?No,no,no,今天我们用css手撸这个花里胡哨的按钮。

做之前我们先分析一下实现过程中的难点:

  1. 按钮的斜切角;
  2. 按钮的边框,也是带斜切角的;
  3. 按钮的内外阴影,不能覆盖斜切角的部分。

按钮主体部分实现

首先我们来实现按钮的主体和边框,说一下实现思路,css可以通过背景渐变实现斜切角的样式,但是这个时候边框就没办法直接用border实现了,只能用两个盒子模拟边框,即小盒子嵌套在大盒子上面,大盒子露出来的部分就是小盒子的边框。让我们看一下代码

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 45px;
    background: linear-gradient(-45deg, transparent 12px, #5bdcfa 0) right,
                 linear-gradient(135deg, transparent 12px, #5bdcfa 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}
.inner{
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: linear-gradient(-45deg, transparent 12px, #011032 0) right,
                 linear-gradient(135deg, transparent 12px, #011032 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

这个时候的效果是这样的:

说一下上面的代码:

  1. 切角的实现:

    background: linear-gradient(-45deg, transparent 12px, #5bdcfa 0) right,
                linear-gradient(135deg, transparent 12px, #5bdcfa 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    linear-gradient(-45deg, transparent 12px, #5bdcfa 0) right

    这一行代码是生成左上角的切角的,即以-45度的倾斜角度,x轴12px的位置开始从transparent到#5bdcfa的渐变,生成右下角的同理。

    那为什么要设置background-size: 50% 100%;呢?因为我们写了两遍渐变,相当于你给墙上刷油漆刷了两遍,会覆盖的,所以我们就是每一遍只刷50%的宽度,一左一右。

    如果两边颜色不同就像上图一样,很好理解,no-repeat是因为我们一边只要一个切角就够了。

  2. 边框

    边框的实现就很简单了,大盒子套小盒子嘛。

这样看来我们只要加个内外阴影就完成了,看起来也不是很难嘛~如果你这样想就是是too young了。

阴影的实现

  1. 外阴影

    按我们常规的想法,直接给outer容器加个box-shadow:0 5px 12px rgba(149, 224, 242, 0.45),完事~看下效果:

    完犊子,左上角和右下角露馅儿了,此路不通啊。别急,给你看个宝贝:filter: drop-shadow(0 5px 12px rgba(149, 224, 242, 0.45));。再看看:

    完美!关于drop-shadow,推荐你看看张鑫旭的文章:CSS3 filter:drop-shadow滤镜与box-shadow区别应用

  2. 内阴影

    内阴影我们也直接给inner容器加box-shadow试试看,box-shadow: inset 0 0 14px 3px rgba(146, 244, 243, 0.55);

    老毛病了,那你该说了,上drop-shadow啊,对不起,那玩意儿不支持内阴影。这时候我们就想了,如果把两个角“切”掉就好了,那css有这个功能吗?还真有:clip-path。看一下MDN的描述:

    clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

    这玩意怎么用呢?它(polygon)是用一个个的坐标点圈一块区域,如下Demo:

    <div class="outer">
        <div class="inner"></div>
    </div>
    .outer,.inner { width: 200px;height: 200px; }
    .outer { background-color: red; }
    .inner {
        background-color: blue;
        clip-path: polygon(
            10px 10px,
            100px 10px,
            100px 100px,
            10px 100px
        );
    }

    蓝色的色块就是我们用clip-path圈出来的区域。

    现在我们把inner容器“有用的”区域圈出来:

    clip-path: polygon(
        0 17px,
        17px 0,
        100% 0,
        100% calc(100% - 17px),
        calc(100% - 17px) 100%,
        0 100%
    )

    效果如下:

    如果你要求不高,其实现在效果已经差不多了,唯一一点瑕疵就是左上角和右下角的内阴影被切掉了,所以这两块的内阴影有些淡,我们可以用两个盒子的来模拟:

    上面是没有clip-path的效果,加上后的最终效果:

    最后附上Demo源码:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
        </head>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: black;
            }
            .outer {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200px;
                height: 45px;
                background: linear-gradient(-45deg, transparent 12px, #5bdcfa 0)
                        right,
                    linear-gradient(135deg, transparent 12px, #5bdcfa 0) left;
                background-size: 50% 100%;
                background-repeat: no-repeat;
                filter: drop-shadow(0 5px 12px rgba(149, 224, 242, 0.45));
            }
            .inner {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                background: linear-gradient(-45deg, transparent 12px, #011032 0)
                        right,
                    linear-gradient(135deg, transparent 12px, #011032 0) left;
                background-size: 50% 100%;
                background-repeat: no-repeat;
                box-shadow: inset 0 0 14px 3px rgba(146, 244, 243, 0.55);
                clip-path: polygon(
                    0 17px,
                    17px 0,
                    100% 0,
                    100% calc(100% - 17px),
                    calc(100% - 17px) 100%,
                    0 100%
                );
                color: #fff;
            }
            .inner:before,
            .inner:after {
                content: '';
                position: absolute;
                width: 40px;
                height: 40px;
                transform: rotate(45deg);
                box-shadow: 0 0 14px 3px rgba(146, 244, 243, 0.55);
            }
            .inner:before {
                left: -28px;
                top: -28px;
            }
            .inner:after {
                bottom: -28px;
                right: -28px;
            }
        </style>
        <body>
            <div class="outer">
                <div class="inner">Click Me!</div>
            </div>
        </body>
    </html>
    
查看原文

赞 0 收藏 0 评论 0

不死小强 回答了问题 · 1月9日

Vue使用$ref获取Dom的时候,获取的Array的顺序是否有和页面显示的Dom顺序不一致的时候

那你循环的时候把index追加到ref后面不就唯一了吗,:ref=test+${index}

关注 3 回答 1

不死小强 回答了问题 · 1月9日

WebSocket 接收数据如何减少对性能的影响

string先转buffer再传输

关注 3 回答 1

不死小强 回答了问题 · 1月9日

有关窗口视图问题?

因为没有针对window.resize事件做处理

关注 2 回答 1

不死小强 回答了问题 · 1月9日

elementUI表单校验

image
删掉这一句,重复调用了

关注 3 回答 2

不死小强 回答了问题 · 1月9日

vscode 调试vue项目可以用attach方式吗?

直接chrome控制台source里面找到map文件打断点不行吗?

关注 3 回答 1

认证与成就

  • 获得 26 次点赞
  • 获得 50 枚徽章 获得 4 枚金徽章, 获得 14 枚银徽章, 获得 32 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-02-06
个人主页被 1.5k 人浏览