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

巴特西

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

最新文章

热门文章