實現這個效果主要是用了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 我覺得我寫的注釋只有我自己能看懂，哈哈哈哈，這個案例的圖片設計的很有技巧，一般人真想不到，可通過審查元 ...