CSS前端常用22个效果总结

1、网站变灰色

用的是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代码的和之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

2、DIV可编辑

在div中添加

contentEditable="true"

属性

<div id="div1" contentEditable="true"  ></div>  

<div id="div2" contentEditable="true" ></div>

3、禁止选择、复制功能

unselectable="on" onselectstart="return false;"

<div unselectable="on" onselectstart="return false;">
你想复制我？门儿都没有！！！
</div>

4、form表单文字两端对齐

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		td {
		        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*/
		    td:after{
		        content:".";
		        display: inline-block;
		        width:100%;
		        overflow:hidden;
		        height:0;
		    }
		}
	</style>
</head>
<body>
	<table border="1" cellspacing="1" cellpadding="10">
		<tr>
			<td>姓名：</td>
		</tr>
		<tr>
			<td>工作单位：</td>
		</tr>
		<tr>
			<td>操作：</td>
		</tr>
		<tr>
			<td>所在地：</td>
		</tr>
	</table>
</body>
</html>

5、input声音录入按钮

<!-- 添加 x-webkit-speech 属性就可以了。 -->
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词"  x-webkit-speech>

6、设置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多张背景图片

background-image属性

div{
	background:url("1.jpg") 0 0 no-repeat,
             url("2.jpg") 200px 0 no-repeat,
             url("3.jpg") 400px 201px no-repeat;
}
/* 也可以这么写 */
div{
	background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
	background-repeat: no-repeat, no-repeat, no-repeat;  
	background-position: 0 0, 200px 0, 400px 201px; 
}

8、CSS选中状态修改

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		::selection {
			background: yellowgreen;
			color: red;
		}
	</style>
</head>
<body>
	<p>我虽然是一个段落标签，但经常被人冷落。</p>
</body>
</html>

9、上传按钮美化

css input[type=file] 样式美化，input上传按钮美化

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		.file {
		    position: relative;
		    display: inline-block;
		    background: #D0EEFF;
		    border: 1px solid #99D3F5;
		    border-radius: 4px;
		    padding: 4px 12px;
		    overflow: hidden;
		    color: #1E88C7;
		    text-decoration: none;
		    text-indent: 0;
		    line-height: 20px;
		}
		.file input {
		    position: absolute;
		    font-size: 100px;
		    right: 0;
		    top: 0;
		    opacity: 0;
		}
		.file:hover {
		    background: #AADFFD;
		    border-color: #78C3F3;
		    color: #004974;
		    text-decoration: none;
		}
	</style>
</head>
<body>
	<a href="javascript:;" class="file">选择文件
	    <input type="file" name="" id="">
	</a>
</body>
</html>

10、CSS :after 和：before选择器

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		.test-div{
		    position: relative;  /*日常相对定位*/
		    width:150px;
		    height:36px;
		    border-radius:5px;
		    border:black 1px solid;
		    background: rgba(245,245,245,1)
		}
		.test-div:before{
		    content: "";  /*:before和:after必带技能，重要性为满5颗星*/
		    display: block;
		    position: absolute;  /*日常绝对定位*/
		    top:8px;
		    width: 0;
		    height: 0;
		    border:6px solid transparent;
		    left:-12px;
		    border-right-color: #000;
		}
	</style>
</head>
<body>
  <div class="test-div"></div>
</body>
</html>

11、透明度

div{
    opacity: .9; 
    filter:alpha(opacity=90)
}
/* IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter； */
.div{
    opacity: 0; 
    cursor:pointer; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

12、超出长度显示省略号

单行文本显示...

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		/* 一般要指定宽度，然后给如下四个属性。 */
		span{
			width:200px;
			display:block;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
		}
	</style>
</head>
<body>
	<span>我是单行文字省略我是单行文字省略</span>
</body>
</html>

多行文本显示....

（主要属性-webkit-line-clamp）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		/* 一般要指定宽度，然后给如下四个属性。 */
		p {
			width: 200px;
		    overflow : hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		}
	</style>
</head>
<body>
	<p>我是多行文字省略我是多行文字省略我是多行文字省略行文字省略行文字省略行文字省略</p>
</body>
</html>

跨浏览器兼容的方案
设置相对定位的容器高度，用包含省略号(…)的元素模拟实现

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
   // background:url(和网页背景颜色一样的一张背景图) repeat-y;
  background-color:#fff;
}
/*
 注意：
	height高度正好是line-height的3倍；
	结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
	IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
	要支持IE8，需要将::after替换成:after；
*/

13、阴影效果

/* 盒子阴影 */
box-shadow: 2px 2px 10px 4px #333333;	
/* 文子阴影 */
text-shadow: 1px 1px 0px #fff;

14、CSS强制换行和不换行

/* 自动换行 */
div{ 
	word-wrap: break-word; 
	word-break: normal; 
}
/* 强制英文单词断行 */ 

div{
	word-break:break-all;
}
/* 强制不换行 */

div{
	white-space:nowrap;
}

15、CSS 圆角

-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、css3弹性布局flex

Flex 布局教程：实例篇

17、textarea禁止拖动

resize: none; //禁止拖动
/* 
以下是resize属性的的各个取值：
    none：用户不能操纵机制调节元素的尺寸；
    both：用户可以调节元素的宽度和高度；
    horizontal：用户可以调节元素的宽度；
    vertical：让用户可以调节元素的高度；
    inherit：默认继承。
*/

18、div垂直居中的方法总结

css的div垂直居中的几种方法
 css固定宽高DIV内部元素垂直居中的方法

19、CSS3的一些前缀总结

-webkit  为Chrome/Safari
-moz  为Firefox
-ms   为IE
-o 为Opera

20、css3的box-sizing

给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。
用box-sizing：border-box,可以去除边框的占位，

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		.container{
			width: 400px;
			height: 40px;
			border: 2px solid #333333;
			padding: 10px;
		}
		.box{
			box-sizing:border-box;
			-moz-box-sizing:border-box; /* Firefox */
			-webkit-box-sizing:border-box; /* Safari */
			width:50%;
			border:2px solid red;
			float:left;
		}
		.container1{
			width: 400px;
			height:40px;
			padding: 10px;
			background: #ccc;
			border: 2px solid #333333;
		}
		.box1{
			width:50%;
			border:2px solid red;
			float:left;
		}
	</style>
</head>
<body>
	<div class="container1">
		<div class="box">这个 div 占据左半部分。</div>
		<div class="box">这个 div 占据右半部分。</div>
	</div>
	<br />
	<div class="container1">
		<div class="box1">这个 div 占据左半部分。</div>
		<div class="box1">这个 div 占据右半部分。</div>
	</div>
</body>
</html>

语法：box-sizing: content-box|border-box|inherit;

21、模糊遮罩效率，模糊滤镜效果

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

22、渐变效果

默认渐变是从上往下

background:#ed4a60; 
background: -webkit-linear-gradient(#ed5a5e, #ed3a61);
background: -o-linear-gradient(#ed5a5e, #ed3a61); 
 background: -moz-linear-gradient(#ed5a5e, #ed3a61); 
background: linear-gradient(#ed5a5e, #ed3a61);

前面加一个参数，right,left,bottom,top等，就可以指定渐变方向：

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

还可以从左上角开始渐变left top，right top(右上角)以此类推，

background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);

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

background: -moz-linear-gradient(<angle>, #ace, #f96);
background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));//老的写法
background: -webkit-linear-gradient(<angle>, #ace, #f96);
background: -o-linear-gradient(<angle>, #ace, #f96);

.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);
}

参考文档
http://www.haorooms.com/post/css_common
http://www.qdfuns.com/notes/47654/f26eaa6148a3de8e8055bb6327b82055.html

Comments 评论区

广西南宁市 2017-11-28 16:18

让Chrome支持小于12px 的文字
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				font-size: 12px;
				display: inline-block;
				-webkit-transform:scale(0.8);
			}
		</style>
	</head>
	<body>
		<span>测试10px</span>
	</body>
</html>

广西南宁市2017-11-28 16:19:02

修改chrome记住密码后自动填充表单的黄色背景

/*通过input : -webkit-autofill来进行修改！*/
input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
}

广西南宁市2017-11-28 16:19:52

最简单的去重方式
1、es6的new Set()方式

let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];
[...new Set(array)]

或者直接

[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]

广西南宁市2017-11-28 16:20:21

#²
2、es5的Array filter()

[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){
   return index === Array.indexOf(elem);
})

广西南宁市2017-11-28 16:20:49

数组对象全等比较

// 这些可以
'abc' === 'abc' // true
1 === 1 // true
// 然而这些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false

广西南宁市2017-11-28 16:21:12

#⁴因为[1,2,3]和[1,2,3]是两个不同的数组，只是它们的元素碰巧相同。因此，不能简单的通过===来判断。

广西南宁市2017-11-28 16:22:05

经典面试题目

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10

把 var 改成 let

const Greeters = []
for (let i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 0
Greeters[1]() // 1
Greeters[2]() // 2

广西南宁市2017-11-28 16:22:31

Math.min()比Math.max()大

Math.min() < Math.max() // false
Math.min() > Math.max() // true
//因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

广西南宁市2017-11-28 16:22:58

点击文字，文字后面radio选中效果

<form>  
	<label for="male">Male</label>
	<input type="radio" name="sex" id="male" />
	<br />  
	<label for="female">Female</label>
	<input type="radio" name="sex" id="female" />
</form>

广西南宁市2017-11-28 16:24:03

网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？
我们点击下载按钮，只会预览“baidu.jpg”这张图片，并不会出现下载框，另存为那种？那么我们如何做呢？
我们只需要如下写：

<a href="https://www.baidu.com/favicon.ico" download >下载</a>  
<!-- 我们还可以指定文件名称，如下写法： -->
<a href="tupiandizhi.jpg" download="baidu" ></a>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。