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

来源：互联网发布：云计算和saas 编辑：程序博客网时间：2024/06/04 20:00

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