您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 背景渐变

2018-5-21 12:52| 作者: admin| 查看: 2110| 评论: 0|来自: 蚂蚁部落

通过background属性可以设置元素的背景色或者背景图片。

更多内容可以参阅CSS background背景一章节。

背景色也可以是以渐变形式存在的,代码演示如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.left{
  background:-webkit-linear-gradient(left, #ace,#f96 );
  background:-moz-linear-gradient(left, #ace,#f96 );
  background:-o-linear-gradient(left,#ace,#f96);
}
.top{
  background:-webkit-linear-gradient(top, #ace,#f96 );
  background:-moz-linear-gradient(top, #ace,#f96 );
  background:-o-linear-gradient(top,#ace,#f96);
}
.lefTop{
  background:-webkit-linear-gradient(left top, #ace,#f96 );
  background:-moz-linear-gradient(left top, #ace,#f96 );
  background:-o-linear-gradient(left top,#ace,#f96);
}
.more{
  background:-webkit-linear-gradient(left, #ace, #f96, #0094ff );
  background:-moz-linear-gradient(left, #ace, #f96, #0094ff );
  background:-o-linear-gradient(left, #ace, #f96, #0094ff);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部