码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-06-01 11:30:38      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

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

标签:

原文地址:http://www.cnblogs.com/Imever/p/4543335.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!