css3

時間 2019-12-01

標籤 css3 css 欄目 CSS 简体版

原文原文鏈接

一、box-shadow：是向盒子添加陰影，支持添加一個或者多個。html

　　　box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];（陰影模糊半徑：此參數可選，其值只能是爲正值，若是其值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就越模糊；陰影擴展半徑：此參數可選，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；）

　　　box-shadow: 10px 5px 4px #666 inset,10px 5px 4px green;

二、border-image：web

三、顏色-----rgba（）：紅(R)、綠(G)、藍(B)、透明度的參數（A）；瀏覽器

四、漸變色彩：分爲線性漸變(linear)和徑向漸變(radial)服務器

五、文字與字體：函數

　　1）text-overflow：是否使用一個省略（....），可是text-overflow只是用來講明文字溢出時用什麼方式顯示（clip表示剪切、ellipsis表示顯示省略標記），要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果佈局

　　　　text-overflow: ellipsis;
　　　　overflow: hidden;            /*溢出內容爲隱藏*/
　　　　white-space: nowrap;        /* 強制文本在一行內顯示*/

　　　　多行文本省略號表示：
　　　　display:-webkit-box;
       text-overflow:ellipsis;
　　　　overflow:hidden;
　　　　-webkit-line-clamp: 3;
 　　　 -webkit-box-orient:vertical;
　　　　width:200px;

　　2）word-wrap：設置文本行爲，是否斷開轉行（normal表示控制連續文本換行、break-word表示內容將在邊界內換行）；字體

　　3）嵌入字體@font-face：可以加載服務器端的字體文件，讓瀏覽器端能夠顯示用戶電腦裏沒有安裝的字體，font-family中，設置@font-face中font-family一樣的值動畫

　　 @font-face {
    　　font-family : 字體名稱;
    　　src : 字體文件在服務器上的相對或絕對路徑;
　　 }

　　4）text-shadow：用來設置文本的陰影效果（Blur：是指陰影的模糊程度，其值不能是負值，若是值越大，陰影越模糊）；url

　　 text-shadow: X-Offset Y-Offset blur color;

六、背景：spa

　　1）、background-origin：背景圖片是從邊框，仍是內邊距（默認值），或者是內容區域開始顯示（若是背景不是no-repeat，這個屬性無效，它會從邊框開始顯示）

　　　　background-origin ： border-box | padding-box | content-box;

　　2）、background-size：設置背景圖片的大小，以長度值或百分比顯示，還能夠經過cover和contain來對圖片進行伸縮。

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

七、選擇器：

　　1）、屬性選擇器：屬性選擇器有了通配符的概念

　　2）、結構性僞類選擇器：

　　　　：root 匹配元素E所在文檔的根元素，做用相似於（<html>）

　　　　：not 能夠選擇除某個元素以外的全部元素,如（ input:not([type="submit"]) ）

　　　　：empty 用來選擇沒有任何內容的元素（空格也算內容）

　　　　：target 用來匹配文檔(頁面)的url的某個標誌符的目標元素，點擊這個url後實現的事情

　　　　：first-child 選擇元素中的第一個子元素

　　　　：last-child 選擇元素中的最後一個子元素

　　　　：nth-child（n）用來定位某個父元素的一個或多個特定的子元素，參數n的起始值始終是1，參數n的值爲0時，選擇器將選擇不到任何匹配的元素

　　　　：nth-last-child(n) 從某父元素的最後一個子元素開始計算

　　　　：first-of-type 定位一個父元素下的某個類型的第一個子元素

　　　　：nth-of-type(n) 計算父元素中指定的某種類型的子元素

　　　　：last-of-type 父元素下的某個類型的最後一個子元素

　　　　：nth-last-of-type(n) 選擇父元素中指定的某種子元素類型，但它的起始方向是從最後一個子元素開始　　　　　　　　

　　3）、only-child 父元素中只有一個子元素，並且只有惟一的一個子元素

　　4）、only-of-type 表示一個元素他有不少個子元素，而其中只有一種類型的子元素是惟一的

　　5）、表單中 :enabled 和 :disabled :checked 和 ::selection匹配突出顯示的文本(用鼠標選擇文本時的文本)，在Firefox瀏覽器還須要添加前綴 :read-only和:read-write，在Firefox瀏覽器還須要添加前綴

八、transform

　　1）、rotate（deg）：旋轉，不會改變元素的形狀

　　2）、skew（x，y）：傾斜顯示，將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜（不設置爲0，x，y爲deg）

　　3）、scale（x，y）：縮放，x，y爲數值

　　4）、translate（x，y）：位移，x，y爲具體px

　　5）、matrix（a,b,c,d,e,f）：用來指定一個2D變換，至關於直接應用一個[a b c d e f]變換矩陣

九、transform-origin：原點設置

十、transition：經過CSS事件來觸發元素的外觀變化，就是經過鼠標的單擊、得到焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值

　　　　　　　　第一，在默認樣式中聲明元素的初始狀態樣式；
　　　　　　　　第二，聲明過渡元素最終狀態樣式，好比懸浮狀態；
　　　　　　　　第三，在默認樣式中經過添加過渡函數，添加一些不一樣的樣式。

transition-timing-function：ease（默認值，又快到慢逐漸變慢）、linear（恆速）、ease-in（加速）、ease-out（減速）、ease-in-out（先加速後減速）

十一、animation：調用動畫

　　animation-iteration-count：動畫播放次數（其值一般爲整數，值爲infinite，動畫將會無限次的播放）

　　animation-direction：動畫播放方向，normal、alternate（動畫播放在第偶數次向前播放，第奇數次向反方向播放）

　　animation-play-state：控制元素動畫的播放狀態，running、paused

keyframes：關鍵幀，在CSS3中其主要以「@keyframes」開頭，後面緊跟着是動畫名稱加上一對花括號「{…}」，括號中就是一些不一樣時間段樣式規則（在@keyframes中定義動畫名稱時，其中0%和100%還可使用關鍵詞from和to來表明）

十二、多列布局：相似報紙、雜誌那種多列排版的佈局

columns：<column-width> || <column-count>
column-gap:normal || <length>     列與列之間的間距
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>       列與列之間的邊框寬度、邊框樣式和邊框顏色，不佔用任何空間位置的（用法相似border）

　　column-width:auto | length

　　column-count:auto | integer

column-span: none | all（肯定跨不跨列，通常用於標題等）

相關標籤/搜索

每日一句

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