常用CSS前端开发效果实例总结

前端开发效果实例|网站前端开发_前端开发者

1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。
html 代码

<a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a> { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);//谷歌浏览器 }

还会存在一些兼容问题,不能适应所有网站

2、给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; }

3、css :after 和：before选择器
html 代码

.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:’.’;font-size:0}

写了这个clearfix，可以让外层div包裹整个内层，符合谷歌闭合机制。
4、透明度
html 代码

opacity: .9; filter:alpha(opacity=90)

IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；
html 代码

.haorooms{opacity: 0; -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;filter: alpha(opacity=0);}

5、超出长度显示省略号
单行文本显示…
一般要指定宽度，然后给如下四个属性。
html 代码

display:bolck; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

多行文本显示….

主要属性-webkit-line-clamp
html 代码

p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器
6、阴影效果
html 代码

-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);

7、css强制换行和不换行
自动换行
html 代码

div{ word-wrap: break-word; word-break: normal; }

强制英文单词断行

html 代码

div{ word-break:break-all; }

强制不换行
html 代码

div{ white-space:nowrap; }

8、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+ */

9、css3的box-sizing
给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。
浏览器支持IE9以上及火狐、谷歌、Opera等等。
html 代码

10、模糊遮罩效率，模糊滤镜效果
html 代码

-webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);

11.inline-block
inline-block会把换行会自动解析为空格.
对父元素进行font-size:0;可以消除这个空隙.
12.z-index
z-index:只在有定位的元素上起作用;
13.js判断客户端是否为PC还是手持设备
html 代码

前端开发效果实例|网站前端开发_前端开发者
https://www.rokub.com

» 本文来自：前端开发者 » 《常用CSS前端开发效果实例总结》

» 本文链接地址：https://www.rokub.com/2731.html

» 您也可以订阅本站：https://www.rokub.com

常用CSS前端开发效果实例总结

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发