...

效果預覽： 代碼： <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制作的立體質感小圓 ...