-
但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼如下：
text-overflow:ellipsis;? overflow:hidden;? white-space:nowrap;
同時，word-wrap也可以用來設置文本行為，當前行超過指定容器的邊界時是否斷開轉行。
語法：
查看全部 -
設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size:?auto?|?<長度值>?|?<百分比>?|?cover?|?contain
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
查看全部 -
將背景圖片做適當的裁剪以適應實際需要。
語法：
background-clip?：?border-box?|?padding-box?|?content-box?|?no-clip
參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數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] 匹配結尾
E[att*="val] 匹配任意
查看全部 -
@font-face?{ ????font-family?:?字體名稱; ????src?:?字體文件在服務器上的相對或絕對路徑; }p?{ ????font-size?:12px; ????font-family?:?"My?Font"; ????/*必須項，設置@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;
查看全部
舉報