css3
方法三
這種方法，在 content 元素外插入一個 div。設置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮動，並顯示在中間。php
<divid="floater"><divid="content">Content here</div></div>
#floater{ float: left; height:50%; margin-bottom: -120px; } #content{ clear: both; height:240px; position: relative; }
優勢：
適用於全部瀏覽器
沒有足夠空間時(例如：窗口縮小) content 不會被截斷，滾動條出現css
缺點：
惟一我能想到的就是須要額外的空元素了(也沒那麼糟，又是另一個話題)html
---------------------------------html5
-webkit-line-clamp下多行文字溢出點點點...顯示實例頁面
width:400px;
display: -webkit-box;
-webkit-line-clamp: 3;-webkit-box-orient: vertical;
overflow: hidden;
------------------------------------------------------------------------------------android
css3 旋轉 transform:rotate( 5deg)css3
一.過渡屬性web
1.transition：簡寫屬性，用於在一個屬性中設置四個過渡屬性。瀏覽器
transition: property duration timing- function delay;微信
瀏覽器支撐狀況：app
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。
2.transition-property：規定應用過渡的 CSS 屬性的名稱。
2.transition-duration：定義過渡效果花費的時間。
3.transition-timing-function：規定過渡效果的時間曲線。
4.transition-delay：規定過渡效果什麼時候開始。
瀏覽器支撐狀況：
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 屬性。
Safari 支持替代的 -webkit-transition-property 屬性。
二. 動畫屬性
1.@keyframes：規定動畫。
以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
語法格式：
@keyframes animation-name {
keyframes-selector { css-styles; }
}
瀏覽器支撐狀況：
Firefox 支持替代的 @-moz-keyframes 規則。
Opera 支持替代的 @-o-keyframes 規則。
Safari 和 Chrome 支持替代的@-webkit-keyframes 規則。
2.animation：全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
語法：animation: name duration timing-function delay iteration-count direction;
3.animation-name：規定 @keyframes 動畫的名稱。
4.animation-duration：規定動畫完成一個週期所花費的秒或毫秒。
5.animation-timing-function：規定動畫的速度曲線。
6.animation-delay：規定動畫什麼時候開始。
7.animation-iteration-count：規定動畫被播放的次數。n / infinite
8.animation-direction：規定動畫是否在下一週期逆向地播放。normal / alternate
9.animation-play-state：規定動畫是否正在運行或暫停。
paused
running
----------------------------------------------------------
三.轉換屬性
1.transform：向元素應用 2D 或 3D 轉換。
瀏覽器支撐狀況：
Internet Explorer 10、Firefox、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用於 2D 轉換）。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
Opera 只支持 2D 轉換。
-----------------------------------------------------------------------------------------------------------
僞類 :nth-of-type 奇數偶數 odd even
#cooperation{ width: 94%; height: auto;font-size:0;}
#cooperation .co-brands{ width: 48%;display:inline-block; vertical-align:top;font-size:12px}
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
-webkit-text-size-adjust:none;//Chrome, 其默認有最小字體大小限制，由於，考慮到兼容性
<input type="text" name="user" placeholder="收貨人姓名"/><br/>設置屬性樣式 []
.add-form>input[value]{ color:#eee;} -------------------------------------------------------------
.shine_red {
-webkit-animation-name: shineRed;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes shineRed {漸變色
from {
-webkit-box-shadow: 0 0 5px #bbb;
}
50% {
-webkit-box-shadow: 0 0 10px red;
}
to {
-webkit-box-shadow: 0 0 5px #bbb;
}
}
linear-gradient( )
#bg {
width: 100%;
background: -webkit-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Firefox 3.6 - 15 */
background: linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* 標準的語法 */
}
blockquote:before {
content
:
open-quote
;
}
blockquote:after {
content
:
close-quote
;
}
blockquote:before {
content: " ";
font-size
:
24pt
;
text-align
:
center
;
line-height
:
42px
;
color
:
#fff
;
float
:
left
;
position
:
relative
;
top
:
30px
;
border-radius:
25px
;
background: url(images/quotationmark.png) -3px-3px#d
dd
;
display
:
block
;
height
:
25px
;
width
:
25px
;
}
結合僞類
儘管有不一樣類型的僞X（僞元素、僞類），咱們可使用僞類連同僞元素一塊兒放入一個CSS規則中，例如，若是咱們但願當咱們的鼠標移到blockqoute上時，引號的背景色可以略微變深。
blockquote
:hove
r
:after
, blockquote:hover:before {
background-color
:
#555
;
}
添加過渡效果
在僞元素上應用transition屬性:before 和
:after 。它們兩個都是絕對定位，並且使用負z-index來放置到圖片後方實現陰影效果
這是一個很是聰明的實現，利用僞元素結合CSS3 box-shadow 來繪製一個使人吃驚的3D按鈕，僅僅使用了CSS和單一的錨文本。僞元素:before 被用來在按鈕的左側添加數字「1」。
使用僞元素來僅僅依靠一個圖片標籤建立一個「凌亂的」疊加圖像效果也是可能的。僞元素用於創建一個圖片疊加的錯覺，經過使用z-index負值使「疊加」的圖片在真正的圖片後面來實現。
- list-style: none;
- display: list-item;
- text-align: -webkit-match-parent;
- list-style: none;
- display: block;
- list-style-type: disc;
- -webkit-margin-before: 1em;
- -webkit-margin-after: 1em;
- -webkit-margin-start: 0px;
- -webkit-margin-end: 0px;
- -webkit-padding-start: 40px;
- -webkit-font-smoothing: antialiased;
- font: normal 12px/1.5 "Microsoft YaHei", Helvetica, Arial, sans-serif;
- color:
#232525;
- vertical-align: bottom;
-----------------------------------------------------------------------------------------------
CSS隱藏多餘文字為...
text-overflow : clip | ellipsis
參數：clip : 簡單的裁切
ellipsis : 當對象內文本溢出時顯示省略標記（...）
說明： 請您注意，text-overflow:ellipsis屬性在FF中是沒有效果的。
white-space:nowrap;
overflow:hidden;
text-overflow : ellipsis ;
overflow: hidden;
white-space: nowrap;
text-overflow: clip|ellipsis|string;
-----------------------------
<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕「後，全屏顯示 <meta name="apple-mobile-web-app-capable" content="yes" />
這meta的做用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
<meta name=」apple-mobile-web-app-status-bar-style」 content=black」 />
默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。
注意： 若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。
在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁內容以應用程序風格顯示，並使狀態欄透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
說明： 這個link就是設置web app的放置主屏幕上icon文件路徑。
圖片尺寸能夠設定爲57*57（px）或者Retina能夠定爲114*114（px），ipad尺寸爲72*72（px）
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //將不識別郵箱
告訴設備忽略將頁面中的數字識別爲電話號碼
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時，在手機HOME界面建立應用程序樣式的圖標。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
------------------------------------------------------------
去掉iPhone、iPad的默認按鈕樣式
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
若是還有圓角的問題，
.button{ border-radius: 0; }
-------------------------------------------------
::-webkit-input-placeholder { /* WebKit browsers */
color: #a4a4a4;
font-size: 14px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #a4a4a4;
font-size: 14px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #a4a4a4;
font-size: 14px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #a4a4a4;
font-size: 14px;
}
能夠在冒號前面寫input和textarea
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#666;
}
知識點：單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
css僞類：CSS 僞類用於向某些選擇器添加特殊的效果。
css僞元素：CSS 僞元素用於向某些選擇器設置特殊效果。
僞元素由雙冒號和僞元素名稱組成。雙冒號是在當前規範中引入的，用於區分僞類和僞元素。可是僞類兼容現存樣式，瀏覽器須要同時支持舊的僞類，如:first-line,:first-letter,:before,:after等等。所以對於css2以前已經有的僞元素兩種寫法的做用是同樣的，可是爲了兼容IE瀏覽器仍是使用單冒號的寫法；
----------------------------------------------------------------
請問這樣的頁面，當中的全透明，邊上半透明，佈局有什麼思路嗎。。。
西安-NS<964089199> 9:49:40
box-shadow就能夠
.cover::before {
content: '';
width: 100%; height:100%;
border-radius: 50%;
border: 400px solid #000;
position: absolute;
left: -400px; top: -400px;
/* 本身瞎填的參數，示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}
<div class="cover"></div>
JS代碼輔助
固然，個人實現也離不開JS的輔助，JS的工做很簡單，讓蒙層的width/height以及border大小和須要引導的元素相關聯。
我特地整了個能夠公用的方法coverGuide（命名不喜歡本身隨便改）：
var coverGuide = function(cover, target) {
var body = document.body, doc = document.documentElement;
if (cover && target) {
// target size(width/height)
var targetWidth = target.clientWidth,
targetHeight = target.clientHeight;
// page size
var pageHeight = doc.scrollHeight,
pageWidth = doc.scrollWidth;
// offset of target
var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
// set size and border-width
cover.style.width = targetWidth + 'px';
cover.style.height = targetHeight + 'px';
cover.style.borderWidth =
offsetTop + 'px ' +
(pageWidth - targetWidth - offsetLeft) + 'px ' +
(pageHeight - targetHeight - offsetTop) + 'px ' +
offsetLeft + 'px';
cover.style.display = 'block';
// resize
if (!cover.isResizeBind) {
if (window.addEventListener) {
window.addEventListener('resize', function() {
coverGuide(cover, target);
});
cover.isResizeBind = true;
} else if (window.attachEvent) {
window.attachEvent('onresize', function() {
coverGuide(cover, target);
});
cover.isResizeBind = true;
// IE7, IE8 box-shadow hack
cover.innerHTML = '<img src="guide-shadow.png">';
}
}
}
};
-------------------------------------------------------------------------
css生成三角形
Triangle Up
|
1
2
3
4
5
6
7
|
#triangle-up {
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-bottom
:
100px
solid
red
;
}
|
Triangle Down
|
1
2
3
4
5
6
7
|
#triangle-down {
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-top
:
100px
solid
red
;
}
|
Triangle Left
|
1
2
3
4
5
6
7
|
#triangle-
left
{
width
:
0
;
height
:
0
;
border-top
:
50px
solid
transparent
;
border-right
:
100px
solid
red
;
border-bottom
:
50px
solid
transparent
;
}
|
Triangle Right
|
1
2
3
4
5
6
7
|
#triangle-
right
{
width
:
0
;
height
:
0
;
border-top
:
50px
solid
transparent
;
border-left
:
100px
solid
red
;
border-bottom
:
50px
solid
transparent
;
}
|
Triangle Top Left
|
1
2
3
4
5
6
|
#triangle-topleft {
width
:
0
;
height
:
0
;
border-top
:
100px
solid
red
;
border-right
:
100px
solid
transparent
;
}
|
Triangle Top Right
|
1
2
3
4
5
6
7
|
#triangle-topright {
width
:
0
;
height
:
0
;
border-top
:
100px
solid
red
;
border-left
:
100px
solid
transparent
;
}
|
Triangle Bottom Left
|
1
2
3
4
5
6
|
#triangle-bottomleft {
width
:
0
;
height
:
0
;
border-bottom
:
100px
solid
red
;
border-right
:
100px
solid
transparent
;
}
|
Triangle Bottom Right
|
1
2
3
4
5
6
|
#triangle-bottomright {
width
:
0
;
height
:
0
;
border-bottom
:
100px
solid
red
;
border-left
:
100px
solid
transparent
;
}
|
<style>
.demo_line_01 {
width: 200px;/*這指的是文字的寬度*/
padding: 0 20px 0;
margin: 20px auto;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
.demo_line_02 {
width:100%;/*這指的是整個行的寬度*/
margin:0 auto;
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.demo_line_02 span {
position: relative;
top: -10px;
background: #666;/*背景可改成白色*/
padding: 0 20px;
}
</style>
</head>
<body>
<div class="demo_line_01">分割線 </div>
<div class="demo_line_02"><span>分割線</span></div>
</body>
-----------------------------------------------------------------------------------
CSS3 修改和去除移動端點擊事件出現的背景框 (tap-highlight-color)
移動端頁面時學到了不少CSS3的有用屬性，其中有一個印象比較深入的屬性：-webkit-tap-highlight-color
參見 http://css-infos.net/property/-webkit-tap-highlight-color
這個屬性是用於設定元素在移動設備（如Adnroid、iOS）上被觸發點擊事件時，響應的背景框的顏色。
例如在Adnroid版本的微信中，點擊a標籤時將會出現一個橙色的小框表示點擊的響應。
此時，若是對元素設置了tap-highlight-color值，例如:
-webkit-tap-highlight-color: rgba(240,240,240,0.7);
則可改變元素被點擊時背景框的顏色。
若是須要背景框不顯示，則能夠將rgba中的alpha值設爲0便可，例如-webkit-tap-highlight-color : rgba(0,0,0,0);
另外還有一個設置選中文字顏色的方法。
一般咱們選中文字時的背景色是藍色。咱們能夠用如下樣式去設置網頁的選中內容的樣式：
::selection { background:#FFF; color:#333; }
::-moz-selection { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}
若是要去掉選中時的顏色，把background都置爲none就好了。
css3屬性 -webkit-font-smoothing
CSS3裏面加入了一個「-webkit-font-smoothing」屬性，能夠使頁面上的字體抗鋸齒,使用後字體看起來會更清晰舒服。
加上以後就頓時感受頁面小清晰了。 淘寶也在用哦！
它有三個屬性：
none ------ 對低像素的文本比較好
subpixel-antialiased ------默認值
antialiased ------抗鋸齒很好
例子：
body{
-webkit-font-smoothing: antialiased;
}
附：-moz-osx-font-smoothing: inherit | grayscale
這個屬性也是更清晰的做用，特別是圖標文字流行的今天。
--------------------------------------------------------
2016.1.8
rem特色
rem是CSS3新增的一個相對單位（root em，根em）。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下面就是
p {font-size:14px; font-size:.875rem;}
-------------------------------------------------------------------------------------------
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child (odd) {
background-color: #f1f1f1;
}
table tr :nth-child(even) {
background-color: #ffffff;
}
</style>
.css('backgroundColor','transparent')
ellipse,橢圓形圓角border-radius
border-radius：50% / 100% 100% 0 0；
border-radius：100% 0 0 100% / 50%
border-radius：100% 0 0 0；
clip-path : polygon(50% 0,100% 50%；50% 100%。0 50%)
1/4的橢圓
css中的連字符- ，js不認識，全部須要改爲第二個單詞 的首字母大寫，如borderLeftWidth
.clear_f {clear: both;overflow: hidden;height: 0;}
- 1. CSS3
- 2. css3
- 3. 【CSS3】
- 4. CSS3濾鏡(filter)--CSS3技術
- 5. 【CSS3】CSS3 濾鏡實現
- 6. 【css3】CSS3動畫（animation @keyframes）
- 7. CSS3簡介及CSS3邊框
- 8. CSS3 Transform
- 9. HTML5 CSS3
- 更多相關文章...
- • W3C CSS 活動 - W3C 教程
- • jQuery Mobile 過渡 - jQuery Mobile 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS3
- 2. css3
- 3. 【CSS3】
- 4. CSS3濾鏡(filter)--CSS3技術
- 5. 【CSS3】CSS3 濾鏡實現
- 6. 【css3】CSS3動畫（animation @keyframes）
- 7. CSS3簡介及CSS3邊框
- 8. CSS3 Transform
- 9. HTML5 CSS3