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