zoukankan      html  css  js  c++  java
  • 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     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; 300px; height:300px; margin:0 auto;}
    2 .child{ position:absolute; left:0; right:0; bottom:0; top:0; 50px; height:50px; overflow:auto; margin:auto;}

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

    复制代码
    复制代码
    1 .outer { display:table; 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     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 }
  • 相关阅读:
    C语言 realloc为什么要有返回值,realloc返回值具体解释/(解决随意长度字符串输入问题)。
    opencv中的vs框架中的Blob Tracking Tests的中文注释。
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 分苹果
    Java实现 蓝桥杯VIP 算法提高 分苹果
    Java实现 蓝桥杯VIP 算法提高 分苹果
    Java实现 蓝桥杯VIP 算法提高 分苹果
  • 原文地址:https://www.cnblogs.com/ZJGG/p/9234875.html
Copyright © 2011-2022 走看看