摘要:
下文讲述使用css实现一个html背景渐变色的效果分享，如下所示；

实现思路: 
    使用css属性gradient
     既可以为background生成一个渐变的颜色值

例:
css实现Html背景色渐变的示例分享

 <meta charset="utf-8" />
<style> 
.d1{ 
	width:500px; 
	height:120px; 
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#336600,endColorStr=#fafafa); /*IE*/ 
	background:-moz-linear-gradient(top,#336600,#fafafa);/*火狐*/ 
	background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#336600), to(#fafafa));/*谷歌*/ 
  
	background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #336600),color-stop(1, #fafafa));/* Safari & Chrome*/
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#336600', endColorstr='#fafafa'); /*IE6 & IE7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#336600', endColorstr='#fafafa')"; /* IE8 */
} 
</style> 
<p>
maomao365.com<br />
生成一个html渐变的背景
</p>
<hr />

<div class="d1"></div>

摘要:
下文讲述html中使div变成圆角的方法分享，如下所示；

 
实现思路:
    通过设置css的border-radius属性,使其变圆角

例:
div变圆角的示例分享

 
<meta charset='utf-8' />

<style>
   div{
     border-radius:5px;
     width:200px;height:100px;
     background-color:green;
     line-height:100px;
     padding-left:20px;
     color:white;
   }
</style>
<div>
	maomao365.com-div圆角
</div>

摘要:
下文讲述使用css设置一个动态按钮的方法分享，如下所示；

今天接到领导的一个按钮动画，
制作一个按钮，当鼠标放上去按钮上的字体出现滑动效果,
那么如何使用纯css实现这一需求呢
下文将一一道来，如下所示:

实现思路:
    1.借助before伪类为按钮添加字体
    2. 借助hover属性和动画属性使鼠标放上去时
     按钮中的字体运动起来

例
制作一个鼠标滑过时，按钮中的字体发生变化

 
<meta charset='utf-8' />
<p>
maomao365.com
css制作一个鼠标经过按钮时字体滑动
</p>
<hr />
<style> 
.box {
	width: 250px;
	height: 60px;
	border: 2px solid black;
	text-align: center;
	font-size: 30px;
	line-height: 60px;
	font-family: sans-serif;
	overflow: hidden;
}

.box span {
	display: inline-block;
	color: blue;
	transition: 0.5s;
}

.box span:nth-child(odd) {
	transform: translateY(-100%);
}

.box span:nth-child(even) {
	transform: translateY(100%);
}

.box span::before {
	content: attr(data-text);
	position: absolute;
	color: green;
}

.box span:nth-child(odd)::before {
	transform: translateY(100%);
}

.box span:nth-child(even)::before {
	transform: translateY(-100%);
}

.box:hover span {
	transform: translateY(0);
}

</style>

<div class="box">
  <span data-text="猫">猫</span>
  <span data-text="猫">猫</span>
  <span data-text="小">小</span>
  <span data-text="屋">屋</span>
  <span data-text="按">按</span>
  <span data-text="钮">钮</span>
</div>