css样式-区域内文字不会被选中

目录

1.区域内文字不会被选中

2.textarea标签去掉右下角的斜线

3.浏览器对css样式的兼容性（eg:透明度、变形、过渡）

4.图片添加白边的显示效果

5.实现同一行中图片和文本垂直居中

--------------------------------------------------------------------

1.区域内文字不会被选中

要注意浏览器的兼容性：

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

2.textarea标签去掉右下角的斜线

resize:none;

3.浏览器对css样式的兼容性（透明度、变形、过渡）

浏览器                 前缀

IE和safari             -webkit-
 Chrome                -ms-
 Firefox                  -moz-

举例：

透明度：

    opacity: 0.8;

    filter: alpha(opacity = 80);

变形：

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);    /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);  /* Opera */
过渡：

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

4.图片添加白边的显示效果

原图：

加工后：

大致的效果可以出现

border:10px solid white;

background: black;

transform: rotate(45deg);

原理：设置白色边框和黑色背景

问题：但是不知道为什么，图片正常情况下（不设置旋转）背景效果失效，在设置了旋转（transform:rotate())后效果出来了

5.实现同一行中图片和文本垂直居中

为图片和文本都设置vertical-align：middle