前言

此文章用于记录在寒假比赛的过程中遇到的一些需求及其解决方法。主要涉及到之前工作学习的过程中未遇见过的技巧。既是为了复现一遍以增强理解，也为了在以后需要的时候能够随时记起。

1. 自定义单/复选框

HTML单/复选框是由类型为Radio的Input元素实现的，但是这个类型的元素会形成一个小圆圈/小方框，并且随浏览器样式的不同而不同。

如果需要自定义这些组件，我的解决方法是将Input元素本身隐藏起来，然后在外层添加一个<label>元素包裹Input，再添加一个Input的兄弟元素，这个兄弟元素就是自定义的，用于表示该组件被选中与否的元素。

以下列出代码：

HTML:

<label>
    <input type="radio" v-model="value" value="value1" style="display: none" />
    <i class="indicator"></i>
</label>

LESS:

label {
    display: flex;
    height: 24px;
    input[type=radio] {
        & + i.indicator {
            //这里定义未选中的样式
        }
        &:checked + i.indicator {
            //这里定义已选中的样式
        }
    }
}

这种自定义样式的单/复选框再比赛项目中被用于选择Tag、单选列表等。

2. CSS实现文字渐变

这个很简单，但是以前没遇到过，这次设计师给的稿子中有个页面的文字需要渐变的。考虑到这种效果在平常用的并不是特别多，所以为了备忘，记录在这篇文章中。

首先要设置文字的颜色为透明色：

color: transparent;

设置一个渐变的背景颜色：

background: linear-gradient(to bottom, color1, color2);

设置background-clip属性：

-webkit-background-clip: text;

最终代码：

color: transparent;
background: linear-gradient(to bottom, color1, color2);
-webkit-background-clip: text;

关于这种属性的兼容性，Can I Use给出的结果如下：

可以看出这个属性的支持还是很不错的。

3. HTML图片下载

正常情况下，如果HTML中的某个超链接链接到一张图片的话，浏览器一般会新开一个标签页，直接将图片在标签页中展示。但是我遇到一个需求就是将图片所在元素的user-select值设置成none，使用户无法右键点击图片保存，然后设置一个Download的超链接，但是不能直接在浏览器展示。

参考了多家图片网站之后发现，他们的a标签中都有一个以前没遇见过的download属性，我意识到这可能是符合需求的东西。于是去MDN上找到了这个属性。文档给出的解释是：

此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

果然是它！我还了解到，除此功能外，download属性的值还能作为下载文件的名称，不过这个功能在我的需求中没有必要，所以不做深究。