在网上看到今天网易相册开始停运,心里也是感慨万千,从 360 网盘停运,到现在网易云相册停运。互联网的产品变化莫测,市场上同类产品竞争大,随时都有可能面临停运。唯有不断创新,不断变化运营理念方可在互联网的风口浪尖存活。以上都是废话,接下来是正题~
在网易云相册停运公告上,看到他是用一种信封方式呈现的,但是他是用的图片,刚好最近在学 css,便想着用 css 实现一下:

确定框架及思路
页面可分为三层
- 内容层
- 信封封面特殊部分
- 信封封面平常部分

分析难点
- 内容层头部的信封样式,可以使用内容层的
border-image
实现渐变结合border
设置显示大小 - 信封特殊部分可以使用圆锥渐变实现特殊样式,左右的小三角形可以使用
border
间接实现
开始实现
组织 html 标签结构
最外层应是一个 div 元素作为一个整体(letter),其中包裹着内容部分(content)和封面部分(cover)
封面部分又包括特殊实现部分(box1)和平常部分(box2)
1 |
|
开发 css 样式
这边我先实现底部的样式:
这一部分,我们可以使用圆锥渐变(conic-gradient)实现
1 | .cover .box1 { |
圆锥渐变是以一个矩形中点到顶部的直线为起点旋转渐变,我们只需要他在 0-23%的时候和 77%-100%的时候为透明色,其他时候为渐变色就可以了。
然后就是左右的小三角形,可以使用 before 和 after 伪元素实现。小三角形利用 border 的渲染特性实现,位置只需要 position 简单定个位就可以了。
1 | /* 制作左边小三角*/ |
关于 css 中 border 的渲染特性,举个栗子就明白了,我们知道 border 有四条边,而且可以分别设置四条边的颜色
明白了吧,如果把其他三个颜色变为透明,那么就可以实现单个不同方向上的三角形。
开始制作内容页效果
内容页的三条边的阴影可以直接使用 box-shadow 实现,有点难度的是上面的信封样式的条纹。
我们可以使用循环渐变实现,一共渐变三种颜色,红色,蓝色,透明色(白色),这里有一个问题,直接用 border 的颜色是实现不了渐变的。我们要使用 border-image 实现。然后运用 border-top 单独增加一个 10px 的边框,这样渐变封面就只会出现在内容页顶部那一边,对于 repeating-linear-gradient 的用法,可以自行查看资料。
1 | .content { |
总结
conic-gradient
虽然好用,但是兼容性太差,谷歌浏览器能用,Safari 浏览器最新版可以用,移动端最 chorime67 版本以上可以使用,ios12.2 可以使用。- 使用
border-image
属性是把元素四周都会有效果,要想自定义在哪边有效果,可以用border-top
,border-left
等属性来指定方向。