lucency html 官网,CSS样式(示例代码)

透明度

.lucency{

filter:alpha(opacity=80);

opacity:0.3;

}

背景透明度

.lucencyBg{

line-height: 1.5 !important;">transparent;

}

1. css hack

1 .pad{

2 padding:17px 0 0 17px; /* 普通写法 */

3 *padding:17px 0 0 17px; /* *为IE7 *+html css()为IE7 */

4 _padding:17px 0 0 17px; /* _为IE6 *html css()为IE6 */

5 }

2. css 设置圆角

1 .radius{

2 -moz-border-radius: 100px;

3 -webkit-border-radius: 100px;

4 border-radius:100px;

5 }

3. css  盒子阴影   (x,y,阴影模糊度,阴影颜色)

1 .shadow{

2 -moz-box-shadow: 3px 3px 4px #fff;

3 -webkit-box-shadow: 3px 3px 4px #fff;

4 box-shadow: 3px 3px 4px #fff;

5 filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=‘#ffffff‘); /* 盒子阴影 IE6,IE7 */

6 -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=‘#ffffff‘)"; /* 盒子阴影 IE8 */

7 }

4. css 透明度

1 .lucency{

2 filter:alpha(opacity=80);

3 opacity:0.8;

4 }

5. css 文本超出范围省略号代替 ( 块级元素，强制单行)

1 .over{

2 overflow:hidden;

3 white-space:nowrap;

4 text-overflow:ellipsis;

5 }

6. css 设置背景透明

1 .lucencyBg{

2 line-height: 1.5 !important;">transparent;

3 }

7. css 文字中间划横线效果

1 .txtDec{

2 text-decoration:line-through;

3 }

8. css 背景图片定位  (通常为负数)

1 .posBg{

2 background-position:x y;

3 }

9.  css 下拉框去掉三角形

1 .selectStyle{

2 appearance:none;

3 -moz-appearance:none;

4 -webkit-appearance:none;

5 }

10. css 输入框没有选中效果

1 .inp{

2 outline:none;

3 }

11. css 禁止页面图片拖曳 ( body )

1 body{

2 οncοntextmenu="return false" οndragstart="return false" tstart="return false"

3 }

12. css 防止点击出现透明背景问题

1 .colorBg{

2 -webkit-tap-highlight-color:rgba(0,0,0,0);

3 }

13. css 未知宽度水平居中 相对浮动

1 .unknow_width_center1 {position:relative; left:50%; float:left;}

2 .unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left;}

14. css 容器内完全居中(垂直 & 水平)

1 .parent{ position:relative; width:300px; height:300px; margin:0 auto;}

2 .child{ position:absolute; left:0; right:0; bottom:0; top:0; width:50px; height:50px; overflow:auto; margin:auto;}

15. css 容器内文字垂直居中

1 .outer { display:table; width:578px; overflow:hidden;}

2 .middle {display:table-cell; vertical-align:middle;}

1 /*下面的CSS是针对IE7，IE6*/

2

16. css 输入框/输入区域不可随意拖动大小

1 .textarea{ resize:none; }

17. css radio / checkbox 选中样式设置

1 input[type=radio]{

2 -webkit-appearance: none;

3 appearance: none;

4 width:15px;

5 height:15px;

6 margin-top:-2px;

7 margin-left:3px;

8 cursor: pointer;

9 vertical-align:middle;

10 -webkit-border-radius:15px;

11 -moz-border-radius:15px;

12 border-radius:15px;

13 border:1px solid #e29452;

14 ">#fff;

15 }

16 input[type=radio]:checked::after {

17 content: url(../images/check.png);

18 margin-left:1px;

19 }