码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式

时间:2018-06-27 17:28:39      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:str   one   sele   ant   ble   下拉   下拉框   table   文本   

透明度

.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     oncontextmenu="return false" ondragstart="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 <!--[if lte IE 7]>
3 <style>
4 .outer{position:relative;}
5 .middle{position: absolute; top: 50%;}
6 .inner{position: relative; top:-50%}
7 </style> 
8 <![endif]-->
技术分享图片
技术分享图片
技术分享图片
技术分享图片

 

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 }

CSS样式

标签:str   one   sele   ant   ble   下拉   下拉框   table   文本   

原文地址:https://www.cnblogs.com/ZJGG/p/9234875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!