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+ */
}