黑马币兑换技术分通道神攻略:入学/技术分/生活/就业黑马入学流程各环节的评分标准
TA的其他帖子(107)
热点资讯
  • 就业薪资
  • 学员感言
  • 班级活动

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

[复制链接]
月亮是我掰弯的 发布于: 2016-10-18 16:01 546 次浏览 0 位用户参与讨论
跳转到指定楼层
本帖最后由 月亮是我掰弯的 于 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);





回复

使用道具 举报

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

本版积分规则

关闭

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