// 紧邻input之后的图片元素
input[type="radio"] + img {
	padding: 20px;
	border-radius: 3px;
	border: 2px solid #f1f1f1;
	cursor: pointer;
}
// 在input之后的span元素 （与input同一父级）
input[type="radio"] ~ span {
	display: none;
}
input[type="radio"]:checked + img {
	border: 2px solid #00aec4;
	cursor: default;
}
input[type="radio"]:checked ~ span {
	content: ' ';
	width: 16px;
	height: 16px;
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url('../img/checked.png?v=@{version}') no-repeat center center;
}

// 重写选择框
input[type='radio'] {
	width: 1px;
	height: 24px;
	opacity: 0;
	display: none;
}
// 未选中
label {
	background-image: url(/hrloo/rz/img/tpl/radio_nor2.png);
	background-repeat: no-repeat;
	background-position: 0px center;
	width: 74px;
	._f(n,14px,34px); 
	color: #666666;
	display:inline-block;
	padding-left: 22px;
}
// 选中
input[type="radio"]:checked + label {
	background-image: url(/hrloo/rz/img/tpl/radio_hov.png);
}
// 禁用
input[type="radio"]:disabled + label {
	background: #ddd;
}
// 禁用 选中
input[type="radio"]:checked:disabled + label {
	background: #ddd;
}

.app_containor {
	height: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

img {
	width: 100%;
	display: block;
	// 解决 img 图像地址为 base64 格式数据时，在ios浏览器上不能长按下载图片问题
	-webkit-touch-callout:default; 
}

CSS：

.container {
    display: table; /*主要代码*/
    *position: relative;  /*for ie67*/
    background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
}
.content {
    vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
    *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
}
.center {
    display: inline-block; /*主要代码*/
    *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
    padding: 10px; border: 1px solid #fff;
}

HTML:

<div class="container">
    <div class="content">
        <div class="center">
            啦啦啦，啦啦啦，我是卖报的小行家....<br>dsdADSsdSD
        </div>
    </div>
</div>

// LESS 渐变变化
._transition(){
	transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
}

// LESS 图片渐变放大样式
img { 
	width: 100%; height: 158px; overflow:hidden; border-radius:5px 5px 0 0; ._transition();
	&:hover {
		transform: scale(1.1); -ms-transform: scale(1.1); ._transition();
	}
}

HTML

<div class="more up"><em>展开</em><u><i></i></u></div>

CSS

.more {
	.font(b,14px,32px); float: right; cursor: pointer;
	em { float: left; color: #333; margin-right:8px; font-weight:normal; }
	u { 
	    position: relative; display: block; width: 0; height: 0; float: left;
	    margin-top: 14px;
	    border-right: 6px solid transparent; 
	    border-top: 7px solid #666; 
	    border-left: 6px solid transparent; 
	}
	i { 
	    position: absolute; display: block; left: -6px; bottom: 2px; width: 0; height: 0; 
	    border-right: 6px solid transparent; 
	    border-top: 7px solid #fff; 
	    border-left: 6px solid transparent; 
	}
	&:hover {
		em { color: #189AE5; }
		u { border-top: 7px solid #189AE5; }
	}
	// 向上
	&.up {
		u { 
		    border-bottom: 7px solid #666; 
		    border-top: none; 
		}
		i { 
			top: 2px; bottom: auto;
		    border-bottom: 7px solid #fff; 
		    border-top: none; 
		}
		&:hover {
			em { color: #189AE5; }
			u { border-bottom: 7px solid #189AE5; }
		}
	}
}

IOS 手机浏览屏底部被挡住的CSS解决代码片断

padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);