前端开发中常用的小技巧整理

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>

 6.对段落文字排版常用样式:

text-align:justify

 

你可能感兴趣的:(前端开发)