Css常用效果总结 — 快速查询笔记

原创 TwoDogCode 随笔 html/css 1938阅读 2017-11-22 14:47:16 举报

CSS
css有不少常用的效果,你在平时浏览网站的时候可能会看到,但是真的要自己写的时候,有时候会突然忘记,今天稍微对那些常见的效果做一下小结。

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

代码如下:
css 代码

注:有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
html 代码

2、DIV可编辑,就是让一个div变成一个类似input输入框的效果。

在div中添加contentEditable="true" 属性就可以了,如下:
html 代码

3、有些网站为了不让用户复制,设置了div禁止选择的功能,设置如下属性:

html 代码

具体代码:
html 代码

4、CSS 中form表单两端对齐

做form表单的时候,前面经常有姓名,年龄,公司名称等等,有的是2个字,有的是4个字,如何让字对齐呢?有的人的做法是打几个空格,但是这样不是很准确,最好的办法是如下:
html 代码

原来样式:

Css常用效果总结—快速查询笔记

5、input声音录入按钮,(仅支持谷歌)

如下图红色框框中的按钮:

Css常用效果总结—快速查询笔记
代码如下:
html 代码

6、给input的placeholder设置颜色

代码如下:
css 代码

7、css3实现一个div设置多张背景图片及background-image属性

css 代码

8、CSS选中状态修改

html 代码

9、css input 样式美化,input上传按钮美化

html 代码

10、CSS :after 和:before选择器

html 代码

11、透明度

css 代码

12、超出长度显示省略号

单行文本显示...
html 代码

多行文本显示.... (主要属性-webkit-line-clamp
html 代码

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

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;
css 代码

13、阴影效果

css 代码

14、CSS强制换行和不换行

css 代码

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即可。
css 代码

16、css3弹性布局flex

这里我就不做总结了,下面链接两个超级大神讲解的非常棒:
Flex 布局教程:语法篇

Flex 布局教程:实例篇
17、textarea禁止拖动
css 代码

18、div垂直居中的方法总结
个人觉得这个总结的不错:
css的div垂直居中的几种方法
css固定宽高DIV内部元素垂直居中的方法
19、CSS3的一些前缀总结
css3为了更好的兼容多个浏览器,通常前面加一大堆前缀,有时候感觉很烦,前缀也容易忘记或者漏掉。下面总结一下!
-webkit 为Chrome/Safari
-moz 为Firefox
-ms 为IE
-o 为Opera
20、css3的box-sizing
给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示。用box-sizing:border-box,可以去除边框的占位,通俗讲它就是一个铁盒子,浏览器支持IE9以上及火狐、谷歌、Opera等等
案例如下:
html 代码

语法:box-sizing: content-box|border-box|inherit;21、模糊遮罩效率,模糊滤镜效果
css 代码

22、渐变效果

默认渐变是从上往下代码如下:
css 代码

前面加一个参数,right,left,bottom,top等,就可以指定渐变方向:
css 代码

还可以从左上角开始渐变left top,right top(右上角)以此类推,代码如下:
css 代码

另外还可以指定渐变角度,这个角度是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。
代码如下:
css 代码

主要内容为:haorooms

评论 ( 7 )
最新评论
hupoo 2017-11-30 10:27:03 7F

对于不让复制的 我一般是打开源代码 复制 我就不信复制不了了

达拉崩吧 2017-11-27 15:49:51 6F

妈耶,可以的可以的收藏收藏,谢谢楼主

15155102848 2017-11-24 09:26:20 5F

满满干货 收啦 楼主承让

1801341373 2017-11-23 11:45:48 4F

666

王二娃子 2017-11-23 11:15:49 3F

alert(666)

18921524750 2017-11-23 10:31:05 2F

javascript 代码

楼苏勇 2017-11-23 09:53:22 1F

html 代码