寒假比赛总结(六) - 关于使用到的一些从未遇见过的东西

前言

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

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给出的结果如下:

http://lenconda.top/images/18022301.png

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

3. HTML图片下载

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

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

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

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

将最新的文章发送到你的邮箱

展示评论