CSS3黑科技 內凹圓角

2021-07-23 17:24:35 字數 996 閱讀 2358

圓角，大家一定都會做，border-radius, 內凹圓角如何實現？

可以拿個白色圓盒子蓋住方形盒子的大半邊實現，但是這樣，是不透明的，背景發生改變時，就要改遮蓋盒子的顏色，或者背景是漸變，改起來更麻煩，或背景是等等，就直接不太好改了，這種方法就有侷限性。 說白了就是遮蓋的那部分不透明以後，自適應性不強。

這裡介紹乙個用徑向漸變實現的內凹圓角，可以解決上述問題。可以用css生成乙個背景透明的內凹圓角。

div


從左到右的紅到藍漸變div>
div


div>
div


div>
div


div>
/* 徑向漸變主體 */


.raidal


class='raidal'>div>
應用時可以用偽元素設定，然後用絕對定位，子絕父相，調整位置，組合成想要的效果

/* 徑向漸變主體 */


.raidal1


class='raidal1'>div>
/* 左上 */


.raidal1


/* 右上 */


.raidal2


/* 右下 */


.raidal3


/* 左下 */


.raidal4


class='raidal1'>div>


class='raidal2'>div>


class='raidal3'>div>


class='raidal4'>div>
徑向漸變有很多引數大家可以自己再嘗試調整，可以出現各種奇怪的形狀，這裡就不演示了。相對來說，內凹圓角就夠用了

/* 左上 */


.ellipse


class='ellipse'>div>

css3實現邊框圓角內凹效果

我們知道在邊框的四個角實現圓角可以用border radius實現,如果在邊框中心實現邊框的內凹效果呢?效果如下圖 要實現上圖的效果可以分為五個步驟 源 如下 lang en charset utf 8 name viewport content width device width,initial...

CSS3 實現圓角方法

這裡只是稍微的翻譯下，希望大家能夠從中領悟。圓角效果，首先我們應該來建立乙個div和簡單的css吧。在css中，我們應該給他定義乙個寬度和高度，當然還有背景。box 2.這種情況比較特殊，是對左上角和右下角設定同一種圓角，而右上角和左下角是同一種圓角。box 3.這種情況也比較特殊，是左上角為20p...

css3製作圓角按鈕

使用 css3 製作圓角按鈕，無需 首先來看看效果圖 html 就這麼簡單 button button button 如果沒有 css 那麼上面的 html 執行起來是這樣的 開始 css3 的編寫 button一些不同顏色的按鈕樣式 green blue color blue gray color...