实现这个效果主要是用了background-image 结合径向渐变radial-gradient。 示例： background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red ...

这是做内凹圆角的核心代码，就是背景图的radial-gradient，只设置两种颜色，中间不进行过渡渐变。两种颜色叠到一起就是一条实线，看上去就是两个色块的拼接。 1.立体质感圆球 网上看到的一个很有趣的小案例——用radial-gradient制作的立体质感小圆 ...

简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。 1 利用描边(outline)属性 方案1利用描 ...

<!--index.wxml--> <view class="container"> <view class="top"></view> ...

常规的 border-image 属性如果直接使用 border-radius 会无效，关于如何实现渐变边框圆角，网上流传着大概这么几种办法： 渐变背景方式（仅适用于纯底色背景） 借助 after 伪类（仅适用于纯底色背景） 借助 css3 中的 mask 遮罩蒙版 加 after ...

最近设计师的风格发生突变，一句话概括就是，能用渐变的地方绝对不用纯色。这不，就整出了一个渐变圆角边框。这渐变好做，圆角好做，渐变圆角也没问题，可是在加个边框还是有点坑的。没办法，看看怎么实现吧 border-image 缺陷不支持圆角 首先想到的是 border-image 的实现方式，用一个 ...

日常开发过程中，特别是商城相关应用开发过程中，时常会遇到花里胡哨的设计图，比如优惠券样式，上图： 实现思路如下： 1.先写一个外容器，实现背景色渐变： Html： Css： 效果 ...

虽然css3的border-radius实现圆角很简单，但是我还是认为css2.1中好多技术还是很值得学习的，我也是后来才知道这就是传说中的滑动门技术。脑洞大开啊 附上demo 我觉得我写的注释只有我自己能看懂，哈哈哈哈，这个案例的图片设计的很有技巧，一般人真想不到，可通过审查元 ...