CSS前端常用22个效果总结

正文 11556字数 336,090阅读

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);//谷歌浏览器
}

Run code

Cut to clipboard

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

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

Run code

Cut to clipboard

2、DIV可编辑
在div中添加

contentEditable="true"

Run code

Cut to clipboard

属性

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

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

Run code

Cut to clipboard

3、禁止选择、复制功能

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

Run code

Cut to clipboard

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

Run code

Cut to clipboard

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>

Run code

Cut to clipboard

5、input声音录入按钮

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

Run code

Cut to clipboard

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;
}

Run code

Cut to clipboard

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; 
}

Run code

Cut to clipboard

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>

Run code

Cut to clipboard

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>

Run code

Cut to clipboard

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>

Run code

Cut to clipboard

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);
}

Run code

Cut to clipboard

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>

Run code

Cut to clipboard

多行文本显示....

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

Run code

Cut to clipboard

<!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>

Run code

Cut to clipboard

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

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；
*/

Run code

Cut to clipboard

13、阴影效果

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

Run code

Cut to clipboard

14、CSS强制换行和不换行

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

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

div{
	white-space:nowrap;
}

Run code

Cut to clipboard

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）

Run code

Cut to clipboard

16、css3弹性布局flex
Flex 布局教程：实例篇

17、textarea禁止拖动

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

Run code

Cut to clipboard

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

19、CSS3的一些前缀总结

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

Run code

Cut to clipboard

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>

Run code

Cut to clipboard

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

Run code

Cut to clipboard

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

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

Run code

Cut to clipboard

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);

Run code

Cut to clipboard

前面加一个参数，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*/

Run code

Cut to clipboard

还可以从左上角开始渐变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);

Run code

Cut to clipboard

另外还可以指定渐变角度，这个角度是一个由水平线与渐变线产生的的角度，逆时针方向。
因此，使用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);
}

Run code

Cut to clipboard

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

有过 1 条评论 »

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

让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,
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,@4, 因为[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>

reply | quote | #¹

Records:1 1/1 «‹1 ›»

lizhenqiu blog

CSS前端常用22个效果总结

相关日志

有过 1 条评论 »

留下評論