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 前端开发插件|网站前端开发
评论前必须登录!
注册