CSS 部分小特效

来源：互联网发布：扫描仪软件下载编辑：程序博客网时间：2024/05/21 22:13

从其他地方提取出来部分小特效

1、三角形

{    display:inline-block;    border-right:6px solid transparent;    border-bottom:6px solid #ffffff;    border-right:6px solid transparent;}

2、阴影

{-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);}

3、圆角

{-wekit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}

4、渐变色

{background-color:#f5f5f5;*background-color:#e6e6e6;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0,0,0 100%,from(#ffffff),to(#e6e6e6));background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);}

5、文本框点击后四周变色

input[type="text"]:focus{border-color:rgba(82,168,236,0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);}

6、设置底部始终在下面

底部的上一个div，不是父类div ，设置为

{min-height:100%;height:auto !important;height:100%;}

7、背景透明

{    background-color:transparent;}

8、边框阴影

{    border: 1px solid #CECBCE;    box-shadow: 0 0 5px #DDDDDD;    border-radius:6px;}

9、表格边距

table{border-collapse: separate;border-spacing: 20px 20px;width: 100%;height: 100%}

10、斜行背景

.disableds {    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px);    opacity: 0.6;}

0 0