CSS製作各種樣式的彩虹效果

2022-09-25 23:12:12 字數 487 閱讀 5967

今天看到一篇文章,說到margin的塌陷的問題,並提供了好幾個例子。

自己之前還沒怎麼遇到過這個問題,正好來研究一下。

css code複製內容到剪貼簿

css樣式一,使用margin塌陷:

css code複製內容到剪貼簿

效果: 

css樣式二,也是使用的margin塌陷,不過做出來的是弧形的彩虹:

css code複製內容到剪貼簿

效果:css樣式三,使用的是box-shadow:

css code複製內容到剪貼簿

效果:css樣式四,使用position:absolute來實現,感覺這種是最常見的了

css code複製內容到剪貼簿

效果: 

css樣式五,使用radial-gradient:

css code複製內容到剪貼簿

本文標題: css製作各種樣式的彩虹效果

本文位址: /web/css/23604.html

CSS製作夢幻彩虹效果

今天看到一篇文章,說到margin的塌陷的問題,並提供了好幾個例子。自己之前還沒怎麼遇到過這個問題,正好來研究一下。xml html code複製內容到剪貼簿 css樣式一,使用margin塌陷 css code複製內容到剪貼簿 效果 css樣式二,也是使用的margin塌陷,不過做出來的是弧形的彩...

CSS各種濾鏡製作10種藝術效果字

並加以組合,我們可以得到許多意想不到的效果。這是一些效果示範,供各位參考。效果一 www.webjx.com 這個效果用了shadow濾鏡,如下 filter shadow color black,direction 135 效果二 www.webjx.com 用blur濾鏡做出的效果,如下 fil...

使用CSS製作圓角效果

web2.0中,圓角效果是很常見的,以前都是用來模仿,現在直接用css就能實現,例子 如下 html 123123123 zvzvzvxzv asdfaer23424311212313 afasdfasdfasdfasd dadsfasdfsaaaaaaaaaaaaaaa asdfaaaaaaaaa...