-
但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實現(xiàn)溢出時產(chǎn)生省略號的效果，還須定義強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實現(xiàn)溢出文本顯示省略號的效果，代碼如下：
text-overflow:ellipsis;? overflow:hidden;? white-space:nowrap;
同時，word-wrap也可以用來設(shè)置文本行為，當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。
語法：
查看全部 -
設(shè)置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size:?auto?|?<長度值>?|?<百分比>?|?cover?|?contain
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現(xiàn)如200px 50px，將背景圖片寬高依次設(shè)置為前面兩個值，當(dāng)設(shè)置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值，當(dāng)設(shè)置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
查看全部 -
將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實際需要。
語法：
background-clip?：?border-box?|?padding-box?|?content-box?|?no-clip
參數(shù)分別表示從邊框、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。
backgroud-clip默認值為border-box。查看全部 -
<div class="whiskers whi_right_top rotate160"></div>?
<div class="whiskers whi_right"></div>?
<div class="whiskers whi_right_bottom rotate20"></div>?
? ? ? ? ? ? ? ? ? ??
<div class="whiskers whi_left_top rotate20"></div>?
<div class="whiskers whi_left"></div>?
<div class="whiskers whi_left_bottom rotate160"></div>?
? ? ? ? </div>?
</div>?
? ? <div id="choker">?
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello CSS3</title>
<link rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>
sss?
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello CSS3</title>
<link rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>
查看全部 -
div:not([id=" a"])
除了div的id為a以外
查看全部 -
E[att^="val] 匹配開頭
E[att$="val] 匹配結(jié)尾
E[att*="val] 匹配任意
查看全部 -
@font-face?{ ????font-family?:?字體名稱; ????src?:?字體文件在服務(wù)器上的相對或絕對路徑; }p?{ ????font-size?:12px; ????font-family?:?"My?Font"; ????/*必須項，設(shè)置@font-face中font-family同樣的值*/ }查看全部 -
text-overflow:ellipsis? 省了標記
overflow: hidden?隱藏
word-wrap:? ?break-word?邊界換行
查看全部 -
background-image:linear-gradient(lto? ,顏色)
至少兩種顏色
查看全部 -
<meta?name=”viewport”?content=”width=device-width,initial-scale=1.0”?/>
腳本下載地址：?
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)???????respond.js(https://github.com/scottjehl/Respond) ?<!—[if?lt?IE9]>??????<scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>?<![endif]>
查看全部 -
border-radius:
box-shadow;
border-image;
查看全部 -
background-clip:?border-box?|?padding-box?|?context-box?|?no-clip
查看全部 -
background-origin:?border-box?|?padding-box?|?content-box;
查看全部
舉報