目录
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