打开软件
可以使用Dreamweaver或Visual studio软件,比如打开VS软件,如下图所示:
02创建一个DIV
然后在body主体中创建一个div名为【a】, <div class="a">DIV</div>,如下图所示:
03设置属性
然后设置div的属性,比如高度、宽度和颜色等等,如下图所示:
04背景渐变色
然后设置背景渐变色,代码如下图:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff))
其中:linear-gradient()是用来创建线性渐变的语句。
05预览效果
点击预览图标,在浏览器中的显示效果图如下所示:
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
div{width:200pxheight:150pxbackground:linear-gradient(red,white)}
3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。
有两种样式,一种是线性渐变,一种是径向渐变线性渐变:background:linear-gradient(0deg,red,orange)0deg意思是渐变角度为0°
径向渐变:background:linear-gradient(circle,red 0%,orange)circle的意思是径向渐变的形状是圆形,eclipse是椭圆形(默认) 0%表示调整径向渐变颜色节点不均匀分布.