CSS3 草稿练习，一些简单特效。

 

box-shadow：0 0 10px  颜色(功能效果 ： 盒子阴影)

实例：

.btn:hover, .btn:focus, .btn:active {
    outline:medium none;
    border:1px solid #329ECC !important;
    opacity:0.9;
    -khtml-opacity: .9;
    -moz-opacity: 0.9;
    -moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(82, 168, 236, 0.5);
    box-shadow: 0 0 5px rgba(82, 168, 236, 0.5);
}

border-raduis：10px  10px  0px  0px (分别对应，左上，右上，左下，右下);  （功能效果:  边框圆角）; 配合box-shadow  效果不错。

实例：

.btn {
    display: inline-block;
    padding: 5px 10px;
    height:30px;
    color: #777 !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
    position: relative;
    cursor: pointer;
    border:1px solid #ccc !important;
    background:#fff url("../image/btn-overlay.png") repeat-x !important;
}

LABEL:before {
    content:"*";
    color:red;
    font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;   （lable标签的前面添加类容，类容颜色为红色）

opacity:0.9;(div 的透明 度：0---1 之间   例如：0.9);

实例：

.btn:hover, .btn:focus, .btn:active {
    outline:medium none;
    border:1px solid #329ECC !important;
    opacity:0.9;
    -khtml-opacity: .9;
    -moz-opacity: 0.9;
    -moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(82, 168, 236, 0.5);
    box-shadow: 0 0 5px rgba(82, 168, 236, 0.5);
}

    font-family:'Arial Unicode MS';(挺不错的一个字体)

兼容性能比较好的一个  让图片变灰色；

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}