CSS3 前端开发常用效果总结 — 快速查询

css3 前端开发插件|前端开发者
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 代码

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

代码如下:
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 代码

css3 前端开发插件|网站前端开发

» 本文来自:前端开发者 » 《CSS3 前端开发常用效果总结 — 快速查询》
» 本文链接地址:https://www.rokub.com/2923.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!