font: 14px/26.6px ‘Microsoft Yahei’, ‘Trebuchet MS’, Georgia, ‘Times New Roman’, Times, sans-sercss有不少常用的效果，你在平时浏览网站的时候可能会看到，但是真的要自己写的时候，有时候会突然忘记，今天稍微对那些常见的效果做一下小结。
1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。
代码如下：
html { 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);//谷歌浏览器}
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的之间插入：
2、p可编辑，就是让一个p变成一个类似input输入框的效果。
在p中添加contentEditable=”true” 属性就可以了，如下：
3、有些网站为了不让用户复制，设置了p禁止选择的功能，设置如下属性：
unselectable="on" onselectstart="return false;"
具体代码：
sdfsdfswerwer324234234234
这样，p里面的东西就不能选择复制了！
4、CSS 中form表单两端对齐
做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
css代码:
.test1 { text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/ .test1:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } }
html代码：
姓 名
姓 名 姓 名
姓 名 名
所 在 地
工 作 单 位
5、input声音录入按钮，（紧支持谷歌）
如下图红色框框中的按钮
代码如下：
添加 x-webkit-speech 属性就可以了。
6、给input的placeholder设置颜色
设置方法如下：
::-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;}
7、css3实现一个p设置多张背景图片及background-image属性
8、CSS选中状态修改，谷歌滚动轴修改
9、css input[type=file] 样式美化，input上传按钮美化
10、CSS :after 和：before选择器
after选择器通常在clear中使用，用法如下：
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
写了这个clearfix，可以让外层p包裹整个内层，符合谷歌闭合机制。
也可以在某个元素前面或者后面追加，例如：
p:after{ content:"haorooms：-";background-color:yellow;color:red;font-weight:bold;}
每个p标签后面都加了一个 -haorooms
11、透明度
opacity: .9; filter:alpha(opacity=90)
IE7和IE6中opacity是没有用的，在IE6中p透明的方法一般用filter；
.haorooms{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
12、超出长度显示省略号
一般要指定宽度，然后给如下四个属性。
display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
案例代码：
.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
13、阴影效果
-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);
14、CSS强制换行和不换行
自动换行
p{ word-wrap: break-word; word-break: normal; }
强制英文单词断行
p{word-break:break-all;}
强制不换行
p{white-space:nowrap;}
15、CSS 圆角
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。 目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;border-radius: 15px;
（注意：border-radius必须放在最后声明，否则可能会失效。）
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
-moz-border-radius-topleft（标准语法：border-top-left-radius）-moz-border-radius-topright（标准语法：border-top-right-radius）-moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）-moz-border-radius-bottomright（标准语法：border-bottom-right-radius）
16、css浏览器兼容问题的一些总结（IE6等）
17、IE6 中png背景透明的最好方法及谈谈IE6和我的博客
18、css3弹性盒子
#haorooms ul { //父亲 display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; } #haorooms ul li{ //儿子设置 -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; float:none;}
关于css3弹性盒子模型之box-flex，我在博客中暂时没有写相关文章，因为这个属性不支持IE，所以我很少用到。
我一般用别的方法来代替这个属性。想达到弹性盒子的要求，jquery mobile 有一套网格布局法，很不错，支持IE的，有时间可以参考一下，或者研究一下他们是怎么写的，参照他们的方法可以自己改写一下！
关于弹性盒子式的布局，大家也可以看下bootstrap,bootstrap提出栅格类的一个说法，你引进他的css之后，可以用col-mid-*来进行布局。例如：
.col-md-6
.col-md-6
各站一半！
.col-md-8
.col-md-4
前面的是整个宽度的三分之二，后面是整个宽度的三分之一！
具体可以看看bootstrap的样式解释：http://v3.bootcss.com/css/
19、textarea禁止拖动
resize: none; //禁止拖动
以下是resize属性的的各个取值:
none：用户不能操纵机制调节元素的尺寸；both：用户可以调节元素的宽度和高度；horizontal：用户可以调节元素的宽度；vertical：让用户可以调节元素的高度；inherit：默认继承。
20、p垂直居中的方法总结
p垂直居中的方法，请参考创想鸟视频教程！
以上就是详细介绍css常用效果总结的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608248.html
微信扫一扫 
支付宝扫一扫 
