<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateY(130deg); /* Firefox */
}
.mm{
//width:300px;
height:25px;
//line-height: 20px;
border:0;
//border-right-style:none;
//border-bottom-style:none;
//一行不允许两次使用斜杠注释,下面是左下角半圆
//border-bottom-left-radius:2em;
border-radius:8px;
color:#677786;
background-color:#DDE4D8; //双杠注释
margin:-15px;
}
/*单击后的颜色,需要放在前面*/
.mm:focus{
background-color:#B9C0B4;
color:#424F5A;
outline: none;
}
.mm:hover{
background-color:#B9C0B4;
color:#424F5A;
}
/*单击时的状态*/
.mm:active{
background-color:#949891;
color:#131517;
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
<p><b>注释:</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>
<center>
<button id="btn" class="mm" >按钮</button>
<button id="btn1" class="mm">按钮</button>
<!-可以直接写js语言onClick=""里面->
</center>
</body>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateY(130deg); /* Firefox */
}
.mm{
//width:300px;
height:25px;
//line-height: 20px;
border:0;
//border-right-style:none;
//border-bottom-style:none;
//一行不允许两次使用斜杠注释,下面是左下角半圆
//border-bottom-left-radius:2em;
border-radius:8px;
color:#677786;
background-color:#DDE4D8; //双杠注释
margin:-15px;
}
/*单击后的颜色,需要放在前面*/
.mm:focus{
background-color:#B9C0B4;
color:#424F5A;
outline: none;
}
.mm:hover{
background-color:#B9C0B4;
color:#424F5A;
}
/*单击时的状态*/
.mm:active{
background-color:#949891;
color:#131517;
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
<p><b>注释:</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>
<center>
<button id="btn" class="mm" >按钮</button>
<button id="btn1" class="mm">按钮</button>
<!-可以直接写js语言onClick=""里面->
</center>
</body>
</html>
效果:
原始移到
单击
离开
重点是看button,一点学习,分享一下!!