div+css背景漸變色代碼示例
發(fā)布時(shí)間:2013-06-18 17:32:28 作者:佚名
我要評(píng)論

本示例代碼就是上面是紅色,下面是黑色,由上到下漸變色的可以看下效果圖,感興趣的朋友可以參考下哈
這個(gè)示例代碼就是上面是紅色,下面是黑色,漸變色的。
<style type="text/css">
#round {
height: 200px;
width:100px;
margin:0px auto;
background-image: -moz-linear-gradient(top, #F00, #000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F00), color-stop(1,#000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F00', endColorstr='#000', GradientType='0');
}
</style>
<div id="round"></div>
演示效果圖
復(fù)制代碼
代碼如下:<style type="text/css">
#round {
height: 200px;
width:100px;
margin:0px auto;
background-image: -moz-linear-gradient(top, #F00, #000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F00), color-stop(1,#000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F00', endColorstr='#000', GradientType='0');
}
</style>
<div id="round"></div>
演示效果圖

相關(guān)文章
css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼
這篇文章主要介紹了css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼,介紹了進(jìn)度條里面的文字需要根據(jù)進(jìn)度的長(zhǎng)度而變化,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一2018-01-09css漸變色彩 省略標(biāo)記 嵌入字體 文本陰影全面了解
下面小編就為大家?guī)?lái)一篇css漸變色彩 省略標(biāo)記 嵌入字體 文本陰影全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05- 這篇文章主要以模擬漸變色條實(shí)例,針對(duì)CSS3 HSLA色彩模式進(jìn)行介紹,使用HSLA色彩模式,可以設(shè)計(jì)不同的透明效果,感興趣的小伙伴們可以參考一下2016-04-26
css教程實(shí)現(xiàn)div背景色漸變色代碼分享
一個(gè)簡(jiǎn)單div+css背景漸變色代碼,大家參考使用吧2013-12-27css實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)div漸變色效果
多組div排列著圈子,利用css的hover屬性產(chǎn)生色層漸變,只要拷貝一段很簡(jiǎn)單的html和css就可以實(shí)現(xiàn)2013-12-18CSS Tips:段落每行漸變色文本效果的實(shí)現(xiàn)方法
這篇文章主要介紹了CSS Tips:段落每行漸變色文本效果的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-03-07