Css3属性

来自CloudWiki
跳转至: 导航搜索

background

background-clip 设置背景覆盖范围 border-box/padding-box/content-box

background-origin设置背景覆盖的起点border-box/padding-box/content-box

background-size 设置背景的大小 cover/contain/长度/百分比

<!DOCTYPE html>
<html>
<head>
	<title>css3属性</title>
	<meta charset="utf-8">
	<style>
		.box{
			width: 200px;
			height:200px;
			border:10px solid rgba(0,0,0,.5);
			padding:50px;
			background: url("img/test.jpg") no-repeat center/cover padding-box padding-box;
			
		}

	</style>
</head>
<body>
	

	<div class="box"></div>
	


</body>
</html>


文字

text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis

word-break 只对英文起作用 以字母作为换行依据 normal/break-word

word-wrap 只对英文起作用 以单词作为换行依据 normal/break-all/keep-all

white-space:pre-wrap 只对中文起作用,强制换行

<!DOCTYPE html>
<html>
<head>
	<title>css3属性</title>
	<meta charset="utf-8">
	<style>

		}
		.text{
			width: 400px;
			border:2px solid red;
			white-space: pre-wrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	
		<div class="text">
		设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围设置背景覆盖范围
	</div>
	<textarea cols="10" rows="10"></textarea>
	<p class="test">This paragraph contains a very long word: this is a very very very very very very long word. The long word will break and wrap to the next line.</p>



</body>
</html>

盒子属性

border-radius:

box-shadow

resize