常用样式分享

  1.使按钮按下时有下按的效果，可以设置透明的边框。

            如：border-bottom: 1px solid rgba(0,0,0,0.25);

 

        2.设计卡片布局：

            可以使用不同颜色的背景图片，或者使用具有反差的颜色的div，作为卡片布局的按钮。

 

        3.设置文字水平对其和垂直对其：

            水平对其：

                text-align:center;  (在于float同时作用时，可能不起作用)

            垂直对其：

                设置行高与父元素的高度相同即可，如: line-height:45px;

 

        4.可以为div等块级元素设置最小高度：min-height;

            当超过该高度时，会自动添加div的高度。

 

        5.css透明度的设置（兼容所有浏览器）

            .transparent_class {  

                  filter:alpha(opacity=50);  

                  -moz-opacity:0.5;  

                  -khtml-opacity: 0.5;  

                  opacity: 0.5; 

            }

 

        6.圆角边框：

            border-radius: 5px;

            border-radius: 10px 0px 10px 10px;

 

        7.边框阴影：

            box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.1);

 

        8.文字阴影（注意在IE9以及IE9之前的浏览器不支持该css属性）：

            text-shadow: 2px 4px 5px gray;

  

        9.margin-right 属性不起作用的分析。

        当块级元素是左对齐时，设置该css属性是不起作用的。另该元素右对齐时，可以设置此属性。另元素右对齐可以采用float:right或者在父元素设置text-align:right的方式。

 

        10.android项目中HTML可以使用的信息提示框：

 

        .msg_box{

            width:50%;

            padding-top:20px;

            padding-bottom:20px;

            text-align:center;

            position:fixed;

            bottom:10%;

            left:25%;

            background-color:gray;

            filter:alpha(opacity=50);  

            -moz-opacity:0.4;  

            -khtml-opacity: 0.4;  

            opacity: 0.4; 

            border-radius: 5px;

            border-radius: 10px 10px 10px 10px;

            font-size:20px;

            display:none;

            color:black;

        }

        

 

        11.可以采用 css 样式中的 visibility:hidden/visible 来设置提示标签或者提示框，如注册页面中的提示信息，使用这样的方法，不会发生页面组件的位置变化。

 

 

        12.可以使用自定义的属性或者html5中的placeholder属性来设置文本组件的初始提示文字

 

 

        13.使div 水平居中：

             包括文字居中和div整体居中。

            .center{

                margin:0 auto;

                text-align:center;

            }

 

        14.ul 中的li 有点这个修复符号的时候，如果使用 float 的话，会造成横向排列的组件水平方向排列不整齐的现象，应当使用一下样式进行去除:

                ui li {

                        list-style-type: none;

                }

 

 

 

    15.背景色渐变

.gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); }

 

 

16.文字垂直居中：

vertical-align:50%;

 

17.css3 图片 模糊效果：

 

#JoynBackground img {    

    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

 

    -webkit-filter: blur(10px); /* Chrome, Opera */

       -moz-filter: blur(10px);

        -ms-filter: blur(10px);    

            filter: blur(10px);

 

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

            

 

 

18. pre 自动换行

pre{  

                white-space:pre-wrap;  

                white-space:-moz-pre-wrap;  

                white-space:-pre-wrap;  

                white-space:-o-pre-wrap;  

                word-wrap:break-word;  

            }  

 

 

19. 在页面上不显示滚动条，但是可以滚动

Google chrome 浏览器：

body::-webkit-scrollbar{

display:none

}

html::-webkit-scrollbar{

display:none

}

 

edge 浏览器、IE浏览器：

body{

-ms-scroll-chaining: chained;

-ms-overflow-style: none;

-ms-content-zooming: zoom;

-ms-scroll-rails: none;

-ms-content-zoom-limit-min: 100%;

-ms-content-zoom-limit-max: 500%;

-ms-scroll-snap-type: proximity;

-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

-ms-overflow-style: none;

overflow: auto;

}

html{

-ms-scroll-chaining: chained;

-ms-overflow-style: none;

-ms-content-zooming: zoom;

-ms-scroll-rails: none;

-ms-content-zoom-limit-min: 100%;

-ms-content-zoom-limit-max: 500%;

-ms-scroll-snap-type: proximity;

-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

-ms-overflow-style: none;

overflow: auto;

}

 

20.页面元素鼠标经过特效：

上下移动，并且出现边框阴影：

效果四：自己使用过的效果

.my_hover{

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

}

.my_hover:hover{

transform:translate(0,-10px);

-webkit-transform:translate(0,-10px);

-moz-transform:translate(0,-10px);

-o-transform:translate(0,-10px);

-ms-transform:translate(0,-10px);

box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.1);

}

 

效果一：360°旋转 修改rotate(旋转度数)

 

 

* {

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

}

*:hover {

transform:rotate(360deg);

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

-ms-transform:rotate(360deg);

}

 

 

效果二：放大 修改scale(放大的值)

* {

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

}

*:hover {

transform:scale(1.2);

-webkit-transform:scale(1.2);

-moz-transform:scale(1.2);

-o-transform:scale(1.2);

-ms-transform:scale(1.2);

}

 

 

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)

* {

transition:All 0.4s ease-in-out;

-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease-in-out;

}

*:hover {

transform:rotate(360deg) scale(1.2);

-webkit-transform:rotate(360deg) scale(1.2);

-moz-transform:rotate(360deg) scale(1.2);

-o-transform:rotate(360deg) scale(1.2);

-ms-transform:rotate(360deg) scale(1.2);

}

 

 

21：透明背景，但是不透明文字

background:rgba(0,0,0,0.6);/*透明背景色，不透明其文字内容*/

 

 

22.去掉 focus 时出现的蓝色边框

*:focus { outline: none; } 

 

 

 

23.css 文本居中的方式：

（1）单行文本：

<div style="height:100px;line-height:100px;">

这里是文本

</div>

 

（2）多行文本

<div style="display:table;">

<div style="display:table-cell;vertical-align:middle;">

这里是第一行文本

这里是第二行文本

</div>

</div>

 

 

24.文字从右向左平铺：

direction:rtl;

unicode-bidi:bidi-override;