Heim > Web-Frontend > HTML-Tutorial > 前端开发中常用的小技巧整理_html/css_WEB-ITnose

前端开发中常用的小技巧整理_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:43:27
Original
789 Leute haben es durchsucht

1.控制超出部分显示省略(单行):

white-space: nowrap;text-overflow:ellipsis;overflow: hidden;
Nach dem Login kopieren

下面使用css3部分控制多行超出部分显示省略(此处适配谷歌内核浏览器):

overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* 设置最高值,防止超出部分显示出来 */max-height: 30px;
Nach dem Login kopieren

2.实现标签背景透明,内容不透明:

background: rgba(255,255,255,0.6)!important;
Nach dem Login kopieren

3.调用服务器端字体:

        @font-face{            font-family: "自定义字体名";            src:url('自定义字体名.ttf')format('opentype');            /* 指定自定义字体的格式 */        }        span{            font-family: "自定义字体名";            font-size: 36px;        }
Nach dem Login kopieren

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)));    }
Nach dem Login kopieren

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>
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage