css如何实现颜色的过渡效果

html-css07

css如何实现颜色的过渡效果,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

button{width:100pxheight:50pxborder:0color:whitebackground:-webkit-radial-gradient(#72787f,#545c64)}

3、浏览器运行index.html页面,此时用CSS实现了按钮中间白、四周黑,上方白、下方灰的效果。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{width:200pxheight:150pxbackground:linear-gradient(red,white)}

3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。

1、在html编辑器软件内,新建html页面,(一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver,这里我使用的软件是HBuilder)。

2、在<body></body>添加<div  class="nav"></div>,于<div  class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签,<li>内同时添加<a>标签,方便连接导航跳转。

3、在新建的<a></a>内,添加横向导航要显示的内容。

4、在<title></title>下方添加一个<style type="text/css"></style>。

5、源文件html保存后,使用浏览器打开预览效果。