CSS3知識點整理&&一些demo

時間 2019-11-24

標籤 css3 css 知識整理一些 demo 欄目 CSS 简体版

原文原文鏈接

css3能作什麼

響應式開發的基礎，而後能實現一些酷炫的效果咯。css

如下案例純css3實現，一點都沒用js （入門簡單，可是水很深）html

叮噹貓純用css3作出 http://codepen.io/airen/pen/icFbaios

若是你們感興趣，你們能夠去慕課網上找大漠老師的課學習。css3

邊框

1.圓角效果 border-radius：border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */ border-radius: 100%;就是一個圓了。git

border-radios:100px/10px (水平100，垂直10)web

2.陰影 box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];（陰影模糊半徑：只能是正值；陰影擴展半徑：能夠是正負值）（自帶邊框）app

外陰影x和y（正值）出如今右下；內陰影x和y（正值）出如今左上; ide

3.爲邊框應用圖片 border-image:wordpress

顏色相關

1.顏色之RGBA 函數

語法：color：rgba(R,G,B,A) (A爲透明度參數，取值在0~1之間，不可爲負值)

2.漸變色彩

文字與字體

1.text-overflow (clip:剪切；ellipsis：省略標記）

省略號效果：text-overflow:ellipsis; overflow:hidden;white-space:nowrap

2.嵌入字體@font-face

3.文本陰影text-shadow

text-shadow: X-Offset Y-Offset blur color; x正向右，y正向下;Blur：是指陰影的模糊程度 (text-shadow: 2px 2px 0 red;)

與背景相關的樣式

1.background-origin ： border-box | padding-box | content-box;背景圖片分別是從邊框，內邊距（默認值），內容區域開始顯示。背景須要設置no-repeat屬性。

2.background-clip:默認值爲border-box,其餘同上

3.background-size:

background-size: auto | <長度值> | <百分比> | cover | contain

①.長度或百分比就設一個值時，圖片等比縮放。

②.cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；

③.contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。

4.multiple backgrounds

background:url(http://eg.png) no-repeat left top/200px 55%

CSS3選擇器

1.屬性選擇器：

2.結構性僞類選擇器:root (根元素爲html)、:not 、:empty、:target、:first-child 、:last-child 、:nth-child(n) (括號裏能夠是2n+一、-n+五、even、odd等)、:nth-last-child(n) (同上)

x:first-of-type 、x:nth-of-type(n) (括號裏同上)、x:last-of-type、x:nth-last-of-type(n)、only-child （子元素只有惟一）、only-of-type (子元素類型惟一)

:enabled、:disabled

:checked（選擇框加點變化示例）、::selection(改變用鼠標選擇網頁文本的樣式)

:read-only(與html中readonly='readonly'配合使用)、:read-write (與「:read-only」選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。)

::before && ::after(做出以下效果圖)

拓展：CSS3實現曲邊陰影&&翹邊陰影

曲邊陰影翹邊陰影

曲邊陰影方法：把直角陰影寫在盒子上，在盒子內部插入兩個曲線陰影，經過定位讓曲線陰影和直角陰影重合，改變z-index，boarder-radios來達到效果。

翹邊陰影方法：直角陰影加上兩個陰影

如下爲實現代碼

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>CSS實現曲線陰影和翹邊陰影</title>
 5     <meta charset="utf-8">
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9      <div class="wrap effect">
10          <h1>Shadow Effect</h1>
11      </div>
12      <ul class="box">
13          <li><img src="images/photo1.jpg"></li>
14          <li><img src="images/photo2.jpg"></li>
15          <li><img src="images/photo3.jpg"></li>
16      </ul>
17 </body>
18 </html>

index.html

body{
    font-family: Arial;
    font-size: 20px;
}

body,ul{margin: 0;
        padding: 0;
        list-style-type: none;
}

.wrap{
      width: 70%;
      height: 200px;
      margin: 50px auto;
      background: #fff;
}

.wrap h1{
    font-size: 20px;
    text-align: center;
    line-height: 200px;
}

.effect{
    position: relative;
    box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    }

.effect:after,.effect:before{             /*雙重疊加*/
    content: '';
    background: #f00;
    position: absolute;
    z-index: -1;
    top: 50%;
    bottom: 0px;
    left: 30px;
    right: 30px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    border-radius: 100px/10px;
}body{
    font-family: Arial;
    font-size: 20px;
}

body,ul{margin: 0;
        padding: 0;
        list-style-type: none;
}

.wrap{
      width: 70%;
      height: 200px;
      margin: 50px auto;
      background: #fff;
}

.wrap h1{
    font-size: 20px;
    text-align: center;
    line-height: 200px;
}

.effect{
    position: relative;
    box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
    }

.effect:after,.effect:before{             /*雙重疊加*/
    content: '';
    background: #f00;
    position: absolute;
    z-index: -1;
    top: 50%;
    bottom: 0px;
    left: 30px;
    right: 30px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    border-radius: 100px/10px;
}

.box{
    width: 980px;
    height: auto;
    clear: both;
    overflow: hidden;
    margin: 20px auto;
}

.box li{
    width: 300px;
    height: 210px;
    position: relative;
    float: left;
    background: #fff;
    margin: 20px 10px;
    border:2px solid #efefef;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
}

.box li img{
    display: block;
    width: 290px;
    height: 200px;
    margin: 5px;
}

.box li:before{
    content:'';
    position: absolute;
    z-index: -2;
    width: 90%;      /*這裏需注意*/
    height: 80%;
    left: 20px;
    bottom: 8px;
    background: transparent;    /*透明的*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 

    -webkit-transform:skew(-12deg) rotate(-4deg);
    -o-transform:skew(-12deg) rotate(-4deg);
    -moz-transform:skew(-12deg) rotate(-4deg);
    -ms-transform:skew(-12deg) rotate(-4deg);
}

.box li:after{
    content:'';
    position: absolute;
    z-index: -2;
    width: 90%;      /*這裏需注意*/
    height: 80%;
    right: 20px;
    bottom: 8px;
    background: transparent;    /*透明的*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 

    -webkit-transform:skew(12deg) rotate(4deg);
    -o-transform:skew(12deg) rotate(4deg);
    -moz-transform:skew(12deg) rotate(4deg);
    -ms-transform:skew(12deg) rotate(4deg);

View Code

css3中變形

transform

旋轉-- :rotate(ndeg):n正值順時針;n負值逆時針

扭曲-- :skew(x,y) :skewX(x) :skewY(y)

:skewX(x) :skewY(y)

縮放-- :scale(x,y) :scareX() :scareY()

位移-- :translate(x,y) :translateX(x) :translateY(y) (不知道元素長和框的狀況下也能夠實現水平垂直居中)

:translateX(x):translateY(y)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
我不知道個人寬度和高是多少，我要實現水平垂直居中    
</div>
</body>
</html>

index.html

 1 .wrapper {
 2   padding: 20px;
 3   background:orange;
 4   color:#fff;
 5   position:absolute;
 6   top:50%;
 7   left:50%;
 8   border-radius: 5px;
 9   -webkit-transform:translate(-50%,-50%);
10   -moz-transform:translate(-50%,-50%);
11   transform:translate(-50%,-50%);
12 }

style.css

矩陣-- :matrix(a,b,c,d,e,f) 6個屬性的意思的：第一個寬度比例1就是原大小，第二個是上下傾斜1就是2倍，2就是3倍，第三個是左右傾斜，數字和第二個同樣的意思，第四個是高度比例1就是原大小，第五個是X方向的像素位移，X方向就是左右，第六個是Y方向的像素位移，X方向就是上下

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/ 到時用參考這

原點-- transform-origin:對元素進行原點位置改變

css3中動畫

在CSS中建立簡單的過渡效果能夠從如下幾個步驟來實現：
第一，在默認樣式中聲明元素的初始狀態樣式；
第二，聲明過渡元素最終狀態樣式，好比懸浮狀態；
第三，在默認樣式中經過添加過渡函數，添加一些不一樣的樣式。

transition:all .5s ease-in-out .2s;

transition-property:指定過渡或動態模擬的CSS屬性

：常見過渡屬性

transition-duration:指定完成過渡所需的時間

transition-timing-function:過渡函數

transition-delay:過渡延遲時間

連寫：-webkit-animation:move 10s ease-in 0.5s infinite

關鍵幀：@Keyframes

 1 @Keyframes changecolor{
 2   0%{
 3     background: red;
 4   }
 5   20%{
 6     background:blue;
 7   }
 8   40%{
 9     background:orange;
10   }
11   60%{
12     background:green;
13   }
14   80%{
15     background:yellow;
16   }
17   100%{
18     background: red;
19   }
20 }
21 div {
22   width: 300px;
23   height: 200px;
24   background: red;
25   color:#fff;
26   margin: 20px auto;
27 }
28 div:hover {
29   animation: changecolor 5s ease-out .2s;
30 }

style.css

調用動畫 animation:name 要與@keyframes連用

設置動畫播放時間 animation-duration: 完成從0%到100%一次動畫所需時間

設置動畫播放方式 animation-timing-function

設置動畫開始播放的時間 animation-delay

設置動畫播放次數 animation-iteration-count:infinate (無限次)

設置動畫播放方向 animation-direction:normal(默認) / alternate（偶數次反方向播放）

設置動畫的播放狀態 animation-play-state:running(默認)/paused

設置動畫時間外屬性 animation-fill-mode:none/forwards/backwords/both 【解析：有些人能夠一路走到底（forwards）,有些人在遭受傷害後能夠恢復到之前（none）,甚至有些人能夠從傷痛中快速的逃離（backwards）,然而有些人已經回不去了,也不知道後面的路該如何走下去（both）】

屬性值	效果
none	默認值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards	表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards	會在向元素應用動畫樣式時迅速應用動畫的初始幀
both	元素動畫同時具備forwards和backwards效果

佈局樣式相關

多列布局——columns:width count (產生報紙的效果)

多列布局——column-width:auto(默認) | <length>

多列布局——column-count:auto | <integer>

列間距 column-gap:normal(默認) | <length>

列表邊框column-rule:width style color

屬性值	屬性值說明
column-rule-width	相似於border-width屬性，主要用來定義列邊框的寬度，其默認值爲「medium」，column-rule-width屬性接受任意浮點數，但不接收負值。但也像border-width屬性同樣，可使用關鍵詞：medium、thick和thin。
column-rule-style	相似於border-style屬性，主要用來定義列邊框樣式，其默認值爲「none」。column-rule-style屬性值與border-style屬值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color	相似於border-color屬性，主要用來定義列邊框顏色，其默認值爲前景色color的值，使用時至關於border-color。column-rule-color接受全部的顏色。若是不但願顯示顏色，也能夠將其設置爲transparent(透明色)

跨列設置 column-span:none(默認) | all(元素跨越全部列)

盒子模型 box-sizing:content | border-box | inherit (這地方瞭解清楚的話要知道W3C標準盒模型和IE傳統下盒模型) 理解這是又多掌握了一個佈局利器

屬性值	屬性值說明
content-box	默認值，其讓元素維持W3C的標準盒模型，也就是說元素的寬度和高度（width/height）等於元素邊框寬度（border）加上元素內距（padding）加上元素內容寬度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box	從新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（IE6如下版本和IE6-7怪異模式），也就是說元素的寬度或高度等於元素內容的寬度或高度。這裏的內容寬度或高度包含了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度＝盒子的寬度或高度—邊框—內距）。
inherit	使元素繼承父元素的盒模型模式

content-box的width是定義內容區域的寬度，而後border、padding什麼的，都在內容區域外，致使整個盒子的寬度變大。
border-box的width是定義整個盒子的寬度，因此在border、padding相同的狀況下，內容寬度會變小。

伸縮佈局（Flexbox）

display:flex;

flex-direction:row（水平） | column（垂直）;

align-items:flex-start | flex-end | center;(水平方向)

justify-content:flex-start | flex-end | center;(垂直方向)

Flex項目自動收縮：須要給每一個flex項目設置flex屬性設置須要伸縮的值。

.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

Media Queries && Responsive設計

W3C總共列出了10種媒體類型，其中Screen、All和Print爲最多見的三種媒體類型。

值	設備類型
All	全部設備
Braille	盲人用點字法觸覺回饋設備
Embossed	盲文打印機
Handheld	便攜設備
Print	打印用紙或打印預覽視圖
Projection	各類投影設備
Screen	電腦顯示器
Speech	語音或音頻合成器
Tv	電視機類型設備
Tty	使用固定密度字母柵格的媒介，好比電傳打字機和終端

引用方法：link標籤、@import和CSS3新增的@media 具體參考http://www.imooc.com/code/1393

Media Queries使用方法：@media 媒體類型and （媒體特性）{你的樣式}

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

設備屏幕的輸出寬度Device Width、not關鍵詞、only關鍵詞（作響應式網站前必須過一遍）

Responsive設計

1.流體網格 2.彈性圖片 3.媒體查詢 4.屏幕分辨率 5.主要斷點

此次先整理到這了，下回再學習整理響應式部分的知識點，和你們一塊兒進步！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。