前端开发中常用的小技巧整理_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-06-24 11:43:27816검색
1.控制超出部分显示省略（单行）：
white-space: nowrap;text-overflow:ellipsis;overflow: hidden;
下面使用css3部分控制多行超出部分显示省略（此处适配谷歌内核浏览器）：
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* 设置最高值，防止超出部分显示出来 */max-height: 30px;
2.实现标签背景透明，内容不透明：
background: rgba(255,255,255,0.6)!important;
3.调用服务器端字体：
@font-face{ font-family: "自定义字体名"; src:url('自定义字体名.ttf')format('opentype'); /* 指定自定义字体的格式 */ } span{ font-family: "自定义字体名"; font-size: 36px; }
4.使用css3实现渐变色（此处适配谷歌内核浏览器）：
.shade{ width: 300px; height: 100px; /* 对背景实现渐变 */ background: -webkit-gradient(linear,0 0 ,0 100%,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5))); }
5.css3实现图片垂直水平居中（此处适配谷歌,火狐内核浏览器）：
<style type="text/css"> .content{ display: box; display: -webkit-box; display: -moz-box; -webkit-box-pack:center; -moz-box-pack:center; -webkit-box-align:center; -moz-box-align:center; border: 1px solid red; width: 600px; height: 500px; }</style><body> <div class="content"> <img src="1.jpg" alt=""> </div></body>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.