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

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