表单样式表
移除input=number的上下箭头
在chrome下:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
Firefox下:
input[type="number"]{-moz-appearance:textfield;}
第二种方案:
将type=”number”改为type=”tel”,同样是数字键盘,但是没有箭头。
禁止textarea缩放
textarea {resize: none;}
CSS3中新增了resize缩放属性
none:用户不能操纵机制调节元素的尺寸;
both:用户可以调节元素的宽度和高度;
horizontal:用户可以调节元素的宽度;
vertical:让用户可以调节元素的高度;
inherit:默认继承。
placeholder字体颜色
::-moz-placeholder {
color: #909090;
opacity: 1;
}
:-ms-input-placeholder {
color: #909090;
}
::-webkit-input-placeholder {
color: #909090;
}
段落样式表
多行省略号
.box {
text-overflow:-o-ellipsis-lastline;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
字间距/首行缩进
//text-indent设置抬头距离css缩进
//letter-spacing来设置字与字间距_字符间距离
移动端
解决移动端Retina屏幕1px边框
方法1
div{border:1px solid #000;}
@media (-webkit-min-device-pixel-ratio: 2) {
div{border:0.5px solid #000; }
}
/*缺点:问题是 retina 屏的浏览器可能不认识0.5px的边框,将会把它解释成0px,没有边框。包括 iOS 7 和之前版本,OS X Mavericks 及以前版本,还有 Android 设备。*/
方法2
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
/*缺点:无法兼容安卓设备,iOS8以下设备*/
方法3:border-image实现
.border-image-1px {
border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.border-image-1px {
border-bottom: none;
border-width: 0 0 1px 0;
-webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
border-image: url(../img/linenew.png) 0 0 2 0 stretch;
}
}
/*缺点:修改颜色麻烦, 需要替换图片;圆角需要特殊处理,并且边缘会模糊*/
方法4:background-image实现
.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}
/*缺点:修改颜色麻烦, 需要替换图片;圆角需要特殊处理,并且边缘会模糊*/
方法5:多背景渐变实现
.background-gradient-1px {
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
background-size: 100% 1px;
}
/*缺点:代码量不少,圆角没法实现*/
方法6:box-shadow实现
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
/*缺点:边框有阴影,颜色变浅*/
方法7:伪类 + transform实现(推荐)
//单条
.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
//四条
.scale-1px{
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
其他
内容不满一屏时底部永远居于页面底部(支持box-sizing的浏览器版本)
html,body{height: 100%;}
body{margin:0;}
.page{
box-sizing: border-box;
min-height: 100%;
padding-bottom: 50px;
}
footer{
height: 50px;
margin-top: -50px;
background:red;
}
<div class="page">主要页面<br></div>
<footer>底部</footer>
透明度兼容ie8
.box {
background: rgb(0, 0, 0); /*不支持rgba的浏览器*/
background: rgba(0,0,0,.5); /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/
}
//IE9同时支持RGBA和filter,导致两个重叠,透明效果变差,补充如下:
<!--[if lt IE 9]>
<style type="text/css">
.box {
background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
zoom: 1;
}
</style>
<![endif]-->
解释下#7f000000,第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
透明度 | IEfilter |
---|---|
0.1 | 19 |
0.2 | 33 |
0.3 | 4C |
0.4 | 66 |
0.5 | 7F |
0.6 | 99 |
0.7 | B2 |
0.8 | C8 |
0.9 | E5 |
css hack
条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
类内属性前缀法
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
选择器前缀法
- html 前缀只对IE6生效
- +html +前缀只对IE7生效
- @media screen\9{…}只对IE6/7生效
- @media \0screen {body { background: red; }}只对IE8有效
- @media \0screen,screen\9{body {background: blue; }}只对IE6/7/8有效
- @media screen\0 {body { background:green; }} 只对IE8/9/10有效
- @media screen and (min-width:0\0) {body {background: gray; }} 只对IE9/10有效
- @media screen and (-ms-high-contrast:active), (-ms-high-contrast: none){body { background: orange; }} 只对IE10有效