.icon_close{
position: absolute;
top: 50%;
right: 0.5rem;
display: inline-block;
width: 0.85rem;
height: 0.1rem;
background: #a3a3a3;
line-height: 0;
font-size: 0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}
.icon_close:after{
content: '/';
display: block;
width: 0.85rem;
height: 0.1rem;
background: #a3a3a3;
-webkit-transform: rotate(-90deg);
}
.icon_down{
display: inline-block;
position: absolute;
right: 0.25rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(135deg);
-webkit-transform: rotate(45deg);
}
.icon_right{
display: inline-block;
position: absolute;
right: 0.5rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.icon_up{
display: inline-block;
position: absolute;
right: 0.25rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.icon_left{
display: inline-block;
position: absolute;
right: 0.5rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
开关
<div class="switchWrap1 open close" id="J_lpyh_status">
<div class="switchWrap2" id="J_lpyh_switch"></div>
</div>
.switchWrap{
float: right;
text-align: right;
width: 4rem;
height: 2.2rem;
}
.switchWrap1{
width: 2.4rem;
height: 1.2rem;
border-radius: 0.6rem;
position: relative;
top: 0.5rem;
left: 1.6rem;
}
.switchWrap2{
width: 1.1rem;
height: 1.1rem;
border-radius: 0.55rem;
position: absolute;
background: white;
}
设置字体大小(小于12px)
html{-webkit-text-size-adjust: none;}
1.只对chrome27.0 版本以下有效,27.0以上版本无效;
2.只对英文才有效,对中文无效。
在新版的chrome中,已经禁止了改属性,建议使用CSS3中的方法:font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1);
字体省略
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
去除input默认样式:
//去除边框
input{
outline: none;
}
inout:focus{
outline: none;
}
//去除Chrome自动填充的表单时淡黄色的背景
input:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
-webkit-box-shadow: 0 0 0px 1000px white inset;//第一应用了自定义样式,第二个作为对照
}
//去除数字键盘右边的默认按钮
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
height: auto;
}
这里比较丰富:
http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/
多行文本垂直居中
方法一:采用display:table-cell
<div class="help_box">
<div class="help_cont">
<p>好好学习</p>
<p>天天向上</p>
</div>
</div>
.help_box{
display: table;
width: 100%;
height: 2.75rem;
text-align: center;
font-size: 0.6rem;
}
.help_cont{
vertical-align:middle;
display:table-cell; ;
}
方法一:采用line-height( 让help_cont容器居中)
<div class="help_box">
<div class="help_cont">
<p>好好学习</p>
<p>天天向上</p>
</div>
</div>
.help_box{
width: 100%;
height: 7.75rem;
line-height: 7.75rem;
}
.help_cont{
display: inline-block;
p{
line-height: 1rem;
}
}
限制文本行数,多出文字已省略号结束
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p style="
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
">
static:对象遵循常规流。top,right,bottom,left等属性不会被应用。 relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。 absolute:对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。fixed:对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。center:对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(CSS3)page:盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3) sticky: 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
</p>
</body>
</html>
参考链接:
http://www.css88.com/webkit/-webkit-line-clamp/
禁用默认菜单(触摸目标时)
-webkit-touch-callout
none:
系统默认菜单被禁用
inherit:
系统默认菜单不被禁用
参考链接:
http://www.css88.com/webkit/-webkit-touch-callout/ (有兼容性)