前言
此文章用于记录在寒假比赛的过程中遇到的一些需求及其解决方法。主要涉及到之前工作学习的过程中未遇见过的技巧。既是为了复现一遍以增强理解,也为了在以后需要的时候能够随时记起。
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
属性的值还能作为下载文件的名称,不过这个功能在我的需求中没有必要,所以不做深究。