<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景渐变</title> <style type="text/css"> input{ width: 90px; height: 40px; margin: 5px; font-size: 16px; text-shadow: 2px 2px 3px rgba(0,0,0,0.8);/*字体阴影*/ } .button1{ background: linear-gradient(to right,orange 10%,red 100%);/*渐变背景*/ border-width: 0;/*去掉边框*/ } .button2{ background: linear-gradient(to left,orange 10%,red 100%); border-width: 0; } .button3{ border-radius: 20px;/*圆角*/ } </style> </head> <body> <input type="button" name="" value="渐变按钮" class="button1"> <input type="button" name="" value="渐变按钮" class="button2"> <input type="button" name="" value="渐变按钮" class="button2 button3"><!-- 减少代码冗余 --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test5</title> <style type="text/css"> div{ width: 100px; height: 30px; border-radius: 5px;/*圆角*/ text-align: center;/*文字水平居中*/ line-height: 30px;/*文字垂直居中*/ margin: 30px; color: blue; } .div1{ float: left; background: linear-gradient(to right,yellow 10%,red 100%);/*渐变背景*/ } .div2,.div3,.div4{ float: left; background: linear-gradient(to left,yellow 10%,red 100%); } hr{ clear: left; border-style: dotted;/*虚线*/ border-width: 3px; border-color: blue; } .div5,.div6,.div7,.div8{ clear: left; background: linear-gradient(to left,yellow 10%,red 100%); } div:hover{ transform: rotate(15deg);/*旋转角度*/ transform-origin: 0 0;/*旋转起始位置*/ } </style> </head> <body> <div class="div1">html5</div> <div class="div2">css3</div> <div class="div3">javascript</div> <div class="div4">jQuery</div> <hr> <div class="div5">html5</div> <div class="div6">css3</div> <div class="div7">javascript</div> <div class="div8">jQuery</div> </body> </html>