黑马程序员IT技术论坛

搜索
加入黑马找回密码

QQ登录

只需一步,快速开始

2017年最新学习路线图黑马币兑换技术分通道神攻略:入学/技术分/生活/就业黑马入学流程各环节的评分标准
查看: 429|回复: 0

[学习交流] css工作中常用的效果总结

[复制链接]
  • TA的每日心情
    奋斗
    2017-3-14 10:42
  • 签到天数: 2 天

    [LV.1]初来乍到

    271

    黑马币

    1

    技术分

    107

    主题

    超级版主

    Rank: 8Rank: 8

    发表于 2016-10-18 16:01:13 | 显示全部楼层 |阅读模式
    本帖最后由 月亮是我掰弯的 于 2016-10-14 15:20 编辑

    1、给input的placeholder设置颜色
    [HTML] 纯文本查看 复制代码
    ::-webkit-input-placeholder { /* WebKit browsers */
        color:    #999;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #999;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    #999;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    #999;
    }


    2、CSS :after 和:before选择器
    [HTML] 纯文本查看 复制代码
    [mw_shl_code=applescript,true].clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

    写了这个clearfix,可以让外层div包裹整个内层,符合谷歌闭合机制。

    3、透明度
    opacity: .9;
    filter:alpha(opacity=90)
    IE7和IE6中opacity是没有用的,在IE6中DIV透明的方法一般用filter;
    [HTML] 纯文本查看 复制代码
    [mw_shl_code=applescript,true].haorooms{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}


    4、超出长度显示省略号
    单行文本显示...
    一般要指定宽度,然后给如下四个属性。

    [HTML] 纯文本查看 复制代码
    [mw_shl_code=applescript,true]display:bolck;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    多行文本显示....
    主要属性-webkit-line-clamp

    [HTML] 纯文本查看 复制代码
    [mw_shl_code=html,true]p {
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器


    5、阴影效果

    [HTML] 纯文本查看 复制代码
    [mw_shl_code=html,true]-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
    box-shadow: 0 1px 1px rgba(0,0,0,.2);


    6、CSS强制换行和不换行
    自动换行
    [HTML] 纯文本查看 复制代码
    div{ 
    word-wrap: break-word; 
    word-break: normal; 
    }

    强制英文单词断行
    [HTML] 纯文本查看 复制代码
    div{
    word-break:break-all;
    }

    强制不换行
    [HTML] 纯文本查看 复制代码
    div{
    white-space:nowrap;
    }


    7、CSS3的一些前缀总结
    css3为了更好的兼容多个浏览器,通常前面加一大堆前缀
    [HTML] 纯文本查看 复制代码
    -webkit  /*为Chrome/Safari*/
    -moz  /*为Firefox*/
    -ms   /*为IE*/
    -o  /*为Opera*/

    [HTML] 纯文本查看 复制代码
    -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
    -moz-transform:rotate(-3deg); /*为Firefox*/
    -ms-transform:rotate(-3deg); /*为IE*/
    -o-transform:rotate(-3deg); /*为Opera*/
    transform:rotate(-3deg); /*为nothing*/

    [HTML] 纯文本查看 复制代码
    -moz-border-radius: 12px; /* FF1-3.6 */
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */


    8、css3的box-sizing
    给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示。用box-sizing:border-box,可以去除边框的占位。
    浏览器支持IE9以上及火狐、谷歌、Opera等等。
    [HTML] 纯文本查看 复制代码
    <style> 
    div.container
    {
    width:30em;
    border:1em solid;
    }
    div.box
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    border:1em solid red;
    float:left;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="box">这个 div 占据左半部分。</div>
    <div class="box">这个 div 占据右半部分。</div>
    </div>


    9、模糊遮罩效率,模糊滤镜效果
    [HTML] 纯文本查看 复制代码
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);





    回复

    使用道具 举报

    发表回复

    *滑动验证:
    您需要登录后才可以回帖 登录 | 加入黑马

    本版积分规则

    关闭

    站长推荐上一条 /3 下一条


    快速回复 返回顶部 返回列表