常用css前端开发效果实例总结
摘要：前端开发效果实例|网站前端开发_前端开发者 1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。 html 代码 html {<br /> filter: grayscale(1……
前端开发效果实例|网站前端开发_前端开发者
1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。
html 代码
还会存在一些兼容问题,不能适应所有网站
2、给input的placeholder设置颜色
html 代码
3、CSS :after 和：before选择器
html 代码
写了这个clearfix，可以让外层div包裹整个内层，符合谷歌闭合机制。
4、透明度
html 代码
IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；
html 代码
5、超出长度显示省略号
单行文本显示…
一般要指定宽度，然后给如下四个属性。
html 代码
多行文本显示….
主要属性-webkit-line-clamp
html 代码
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器
6、阴影效果
html 代码
7、CSS强制换行和不换行
自动换行
html 代码
强制英文单词断行
html 代码
强制不换行
html 代码
8、CSS3的一些前缀总结
css3为了更好的兼容多个浏览器，通常前面加一大堆前缀
html 代码
html 代码
html 代码
9、css3的box-sizing
给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。
浏览器支持IE9以上及火狐、谷歌、Opera等等。
html 代码
10、模糊遮罩效率，模糊滤镜效果
html 代码
11.inline-block
inline-block会把换行会自动解析为空格.
对父元素进行font-size:0;可以消除这个空隙.
12.z-index
z-index:只在有定位的元素上起作用;
13.js判断客户端是否为PC还是手持设备
html 代码
前端开发效果实例|网站前端开发_前端开发者 https://www.rokub.com
近期评论