微信小程序

2018-12-13半醉, 人间阅读(4884)评论(1)赞(1)

        凸起效果的主要思路就是使用一长串累加的投影，不设模糊并以1px（这边用rpx） 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果。 在上图中可以...

2018-12-12banzui阅读(4552)评论(0)赞(0)

        在网页中，对文字进行艺术加工已经变得非常普遍了，比如凸版印刷效果，当鼠标悬停时的模糊效果，浮雕（伪3D）效果，等等。要达成这些效果，我们往往会用到一系列精心排列的文本投影，并且需要明白...

2018-11-21半醉, 人间阅读(3734)评论(0)赞(0)

上一章中我们已经介绍了怎么实现切角效果，文章最后附带了三角形的实现方式，这边就利用三角形实现带尖角的对话框效果，角度方向可以根据需要调整。 我们将该效果分成两部分，一部分是顶部的尖角，另一部分是底部的文本框。这边直接贴代码，大家可以根据需要...

2018-11-20半醉, 人间阅读(2408)评论(0)赞(1)

CSS渐变是个非常强大的功能吗，我们可以用来实现各种效果，这边我们就用渐变来实现切角效果。首先实现一个角被切掉的效果，以右下角为例。这其中最大的窍门在于充分利用渐变的一大特性：渐变可以接受一个角度作为方向，而且色标的位置信息也可以是绝对的长...

2018-11-13半醉, 人间阅读(2357)评论(0)赞(0)

大多数人都用过box-shadow来生成投影，我们可以通过设置模糊值（第三个参数）为零，扩张半径（第四个参数）为一个正值来实现一个实线边框，效果等同于border实现的边框效果。 background: yellowgreen; box-s...

2018-11-08半醉, 人间阅读(3756)评论(0)赞(1)

微信小程序：分割线中间文字效果，这边直接贴代码和效果图，大家对号入座 .testClass{ width:100%; margin-top: 100rpx; align-self: center; position: relative; d...

2018-11-07半醉, 人间阅读(6729)评论(0)赞(5)

微信小程序各种分割线效果，直接看图对号入座： 如果要实现垂直方向的分割线代码也是一样的，只需把宽度设为固定值然后边框设在左边或右边就可以了 .splite-line-dashed { height: 1px; border: none; b...