html5学习笔记7-第二章上机（之二）

来源：互联网发布：php mysql.sock 编辑：程序博客网时间：2024/05/29 04:49

一、颜色渐变的按钮

/*按钮*/.button {     display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */      *display: inline;    vertical-align: baseline;     margin: 0 2px;     outline: none;     cursor: pointer;     text-align: center;     text-decoration: none;     font: 14px/100% Arial, Helvetica, sans-serif;     padding: .5em 2em .55em;     text-shadow: 0 1px 1px rgba(0, 0, 0, .3);     -webkit-border-radius: .5em;     -moz-border-radius: .5em;     border-radius: .5em;     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);     box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }.button:hover { text-decoration: none; }.button:active { position: relative; top: 1px; }.black {     color: #d7d7d7;    border: solid 1px #333;     background: #333;     background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));     background: -moz-linear-gradient(top, #666, #000);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');}.black:hover {     background: #000;     background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));     background: -moz-linear-gradient(top, #444, #000);      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}.black:active {     color: #666;     background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444);      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

   <button class="button black">mybutton</button>

效果：

按下后：

【输入框半透明效果】

<style type="text/css">input, textarea {    padding: 4px;    border: solid 1px #E5E5E5;    outline: 0;    font: normal 13px/100% Verdana, Tahoma, sans-serif;    width: 200px;    background: #FFFFFF;    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;    }textarea {    width: 400px;    max-width: 400px;    height: 150px;    line-height: 150%;    background:url(images/form-shadow.png) no-repeat bottom right;}input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; }label {    margin-left: 10px;    color: #999999;    display:block;}.submit input {    width:auto;    padding: 9px 15px;    background: #617798;    border: 0;    font-size: 14px;    color: #FFFFFF;}</style></head><body><form>    <p class="name">        <label for="name">姓名</label>        <input type="text" name="name" id="name" />    </p>    <p class="email">        <label for="email">邮箱</label>            <input type="text" name="email" id="email" />    </p>    <p class="web">        <label for="web">个人网址</label>            <input type="text" name="web" id="web" />    </p>    <p class="text">        <label for="text">留言</label>        <textarea name="text" id="text"></textarea>    </p>    <p class="submit">        <input type="submit" value="提交" />    </p></form>

效果：

素材：

图片三种颜色阴影的叠加：

<style type="text/css">body {    margin:24px;}img{    height:300px;    -moz-box-shadow:4px 4px 12px 12px green,0 0 10px red, 2px 2px 10px 10px yellow;                          box-shadow:0 0 10px red, 2px 2px 10px 10px yellow,                   4px 4px 12px 12px green;        -webkit-box-shadow:0 0 10px red,           2px 2px 10px 10px yellow,                    4px 4px 12px 12px green;                    }</style></head><body><img src="images/pic6.jpg"  /></body>

原图：

效果：

0 0