...

效果预览： 代码： <div className="his-detail"></div> .his-detail{ ...

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

css: .bound{ background-color: #3EAAF2;width: 300px;height: 100px;display: flex;flex-direction: column;align-items: center;position ...

...

1、半圆 半圆分为：上半圆、下半圆、左半圆、右半圆，我们只要学会制作某一个方向的半圆，其他方向的半圆都可以轻松实现，其原理都一样。 假如我们要制作上半圆，实现原理：把高度height设置为宽度width的一半，并且左上角和右上角的圆角半径定义为元素的高度一致，而右下角和左下角的圆角半径定义 ...

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

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