css画稿 |ie css 渐变

/*创建画板*/
#canvas {
width: 800px;
height: 600px;
border: 1px solid #000;
margin: 20px auto;
position: relative;
}
/*绘制矩形*/
.rectangle {
position: absolute;
width: 200px;
height: 100px;
background-color: #f00;
top: 50px;
left: 50px;
}
/*添加文本*/
.text {
position: absolute;
top: 70px;
left: 100px;
font-size: 36px;
color: #fff;
}
/*绘制按钮*/
.button {
position: absolute;
width: 100px;
height: 50px;
background-color: #f00;
top: 200px;
left: 50px;
padding: 5px 10px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
/*绘制图片*/
.picture {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background: url('picture.jpg') no-repeat center center;
background-size: cover;
border-radius: 5px;
}
/*绘制链接*/
.link {
position: absolute;
top: 400px;
left: 50px;
color: #f00;
font-size: 18px;
text-decoration: none;
border-bottom: 1px solid #f00;
}
.link:hover {
color: #000;
border-bottom: 1px solid #000;
}

以上为常用的CSS样式代码，可以用于绘制网页稿件。需要注意的是，CSS绘制的样式只是网页的外观，还需要通过HTML结构和JavaScript代码实现网页的交互功能。