Heim > Artikel > Web-Frontend > 前端开发中常用的小技巧整理_html/css_WEB-ITnose
前端开发中常用的小技巧整理_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:27773Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：深入理解Ember-Data特性（下）_html/css_WEB-ITnoseNächster Artikel：z-index堆叠规则_html/css_WEB-ITnose