CSS3筆記-增強版

時間 2019-11-29

標籤 css3 css 筆記增強欄目 CSS 简体版

原文原文鏈接

屬性選擇器:

E[attr]只使用屬性名，但沒有肯定任何屬性值

E[attr="value"]指定屬性名，並指定了該屬性的屬性值

E[attr~="value"]指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫

E[attr^="value"]指定了屬性名，而且有屬性值，屬性值是以value開頭的

E[attr$="value"]指定了屬性名，而且有屬性值，並且屬性值是以value結束的

E[attr*="value"]指定了屬性名，而且有屬性值，並且屬值中包含了value

E[attr|="value"]指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）

備註：IE7及以上支持;

結構性僞類選擇器：

E:nth-child(n) 表示E父元素中的第n個字節點

p:nth-child(odd){background:red}/*匹配奇數行*/

p:nth-child(even){background:red}/*匹配偶數行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n個字節點，從後向前計算

E:nth-of-type(n) 表示E父元素中的第n個字節點，且類型爲E

E:nth-last-of-type(n)表示E父元素中的第n個字節點，且類型爲E,從後向前計算

E:empty 表示E元素中沒有子節點。注意：子節點包含文本節點

E:first-child 表示E元素中的第一個子節點

E:last-child 表示E元素中的最後一個子節點

E:first-of-type 表示E父元素中的第一個子節點且節點類型是E的

E:last-of-type 表示E父元素中的最後一個子節點且節點類型是E的

E:only-child表示E元素中只有一個子節點。注意：子節點不包含文本節點

E:only-of-type 表示E的父元素中只有一個子節點，且這個惟一的子節點的類型必須是E。注意：子節點不包含文本節點

僞類選擇器：

E:target 表示當前的URL片斷的元素類型，這個元素必須是E

E:disabled 表示不可點擊的表單控件

E:enabled 表示可點擊的表單控件

E:checked 表示已選中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一個字符

E::selection表示E元素在用戶選中文字時

E:before 生成內容在E元素前

E:after 生成內容在E元素後

before和after中的content填寫要添加的內容

E:not(s) 表示E元素不被匹配

E~F表示E元素其後的F元素

新增顏色模式:

rgba:

r Red 紅 0-255

g Green 綠 0-255

b Blue 藍 0-255

a Alpha 透明 0-1

實例: 背景透明，文字不透明(只給背景加上rgba)

問題：注意邊框顏色透明有問題

Hsl：

H Hue 色調任意數值

S saturation 飽和度 0%-100%

L Lightness 亮度 0%-100%

文字陰影：

text-shadow：x y blur color, …,…

參數：

x 橫向偏移

y 縱向偏移

blur 模糊距離

color 陰影顏色

文本陰影若是加不少層，會很卡很卡很卡

文字陰影應用

最簡單用法

text-shadow:2px 2px 4px black

陰影疊加

text-shadow:2px 2px 0px red, 2px 2px 4px green;

先渲染後面的，再渲染前面的

幾個好玩的例子

層疊：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;

文字移入模糊：

h1{ font:100px/200px "微軟雅黑"; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,1); border:1px solid #000; transition:1s;}

h1:hover{color:rgba(0,0,0,0);text-shadow:0 0 100px rgba(0,0,0,0.5);}

文字描邊：

-webkit-text-stroke:寬度顏色

新增文本功能（瀏覽器全兼容）：

direction 定義文字排列方式(全兼容)

rtl 從右向左排列

ltr 從右向左排列

注意要配合unicode-bidi (文字排列順序)一塊使用

text-overflow 定義省略文本的處理方式

clip 無省略號

ellipsis 省略號 (注意配合overflow:hidden和white-space:nowrap(文本不換行)一塊使用)

彈性盒模型：

注意在使用彈性盒模型的時候
父元素必需要加display:box 或 display:inline-box

box-orient 定義盒模型的佈局方向:
參數：
horizontal 水平顯示
vertical 垂直方向

box-direction 元素排列順序:
參數：
normal 正序
reverse 反序
box-ordinal-group (數字，1最早)設置元素的具體位置

box-flex 定義盒子的彈性空間：
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 全部子元素的box-flex屬性值的和
.box div:nth-of-type(1){-webkit-box-flex:1;}
.box div:nth-of-type(2){-webkit-box-flex:3;} // 分紅四份，第一個佔1份，第二個佔3份

box-pack 對盒子富裕(空白無元素)的空間進行管理：
參數：
start 全部子元素在盒子左側顯示，富裕空間在右側
end 全部子元素在盒子右側顯示，富裕空間在左側
center 全部子元素居中
justify 富餘空間在子元素之間平均分佈

box-align 在垂直方向上對元素的位置進行管理：
參數：
star 全部子元素在居頂
end 全部子元素在居底
center 全部子元素垂直居中

盒模型陰影：

box-shadow:[inset] x y blur [spread] color
參數：
[inset]：可選，投影方式，inset：內投影；默認：外投影。
x、y：陰影偏移
blur：模糊半徑
spread：擴展陰影半徑。先擴展原有形狀，再開始畫陰影
color：顏色

box-reflect 倒影：
參數：
direction 方向 above|below|left|right;
距離
漸變（可選）-webkit-linear-gradient(red 0,blue 100%)

resize 自由縮放：
參數：
both 水平垂直均可以縮放
horizontal 只有水平方向能夠縮放
vertical 只有垂直方向能夠縮放
注意：必定要配合overflow:auto 一塊使用

怪異盒子：

box-sizing 盒模型解析模式
content-box 標準盒模型 width/height=border+padding+content
corder-box 怪異盒模型 width/height=content

css3分欄佈局:

column-width 每一欄目的寬度
column-count 欄目的列數
column-gap 欄目相隔的距離
column-rule 欄目的間隔線

css3響應式佈局:

媒體類型
all 全部媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech '聽覺'相似的媒體類型
tty 不適用像素的設備
tv 電視

關鍵字
and
not not關鍵字是用來排除某種制定的媒體類型
only only用來定某種特定的媒體類型

媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 設備像素比 window.devicePixelRatio = 物理像素 / dips

樣式引入

外部引入css寫法：
橫屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
豎屏
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
屏幕大於800px時：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
屏幕大於600px小於800px時：
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
屏幕小於600px時：
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">

頁面內style樣式寫法：
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

爲移動設備添加 viewport：

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
content 參數：
width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否容許用戶縮放(yes/no)

移動端的頭部標籤和meta大全：

<!DOCTYPE html> 
<html lang="zh-cmn-Hans"> 
<head>

<meta charset='utf-8'>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<meta name="description" content="不超過150個字符"/>

<meta name="keywords" content=""/>

<meta name="author" content="name, email@gmail.com"/>

<meta name="robots" content="index,follow"/>

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">



<meta name="apple-mobile-web-app-title" content="標題">

<meta name="apple-mobile-web-app-capable" content="yes"/>


<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<meta name="format-detection" content="telphone=no, email=no"/>


<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>




<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>


<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>




<meta name="msapplication-TileColor" content="#000"/>

<meta name="msapplication-TileImage" content="icon.png"/>


<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>


<title>標題</title>
</head>

圓角：

border-radius: 1-4個數字 / 1-4個數字

前面是水平，後面是垂直

不給「/」則水平和垂直同樣

border-radius: 10px/5px; 相似橢圓

參數個數：

用法

1個：都同樣

border-radius: 同樣

2個：對角

border-radius: 左上&右下右上&左下

3個：斜對角

border-radius: 左上右上&左下右下

4個：所有，順時針

border-radius: 左上右上右下左下

邊框：

邊框圖片 border-image

border-image-sourceg 引入圖片

border-image-slice 切割圖片

border-image-width 邊框寬度

border-image-repeat 圖片的排列方式

round 平鋪,repeat 重複,stretch拉伸

邊框顏色 border-colors

線性漸變:

線性漸變格式：

linear-gradient([<起點> || <角度>,]? <點>, <點>…)

linear-gradient(60deg,red 0,blue 50%,green 100%)//由紅漸變到藍再漸變到綠

repeating-linear-gradient：平鋪

參數：

起點：從什麼方向開始漸變 left、top、left top 默認：top。

角度：從什麼角度開始漸變 xxx deg的形式

點：漸變點的顏色和位置 black 50%，位置可選

加入<點>的位置：

top, red 40%, green 60%

top, red 50%, green 50%

同一個位置兩個點——直接跳變

也能夠用px

配合rgba：

top, rgba(255,255,255,1), rgba(255,255,255,0)

加入背景圖片：

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

只能用在背景上：

IE：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

徑向漸變：

radial-gradient([<起點>]? [<形狀> || <大小>,]? <點>, <點>…);

起點：能夠是關鍵字（left,top,right,bottom），具體數值或百分比

形狀： ellipse、circle

大小 :具體數值或百分比，也能夠是關鍵字（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;

注意firefox目前只支持關鍵字

背景：

多背景，逗號分開：

background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

背景尺寸：

background-size:x y

background-size:100% 100%

cover 放大

contain 縮小

background-origin ： border | padding | content

border-box：從border區域開始顯示背景。

padding-box：從padding區域開始顯示背景。

content-box：從content區域開始顯示背景。

background-clip

border：從border區域向外裁剪背景。

padding：從padding區域向外裁剪背景。

content：從content區域向外裁剪背景。

no-clip：從border區域向外裁剪背景。

text: 除了設置透明文字的部分，其他部分都已經被裁減掉

遮罩：

mask-image

mask-position

mask-repeat

實例：特殊形狀的幻燈片效果

w3c標準：

-ms-transform:translate(100px,100px); //-ms表明IE內核識別碼（360屬於IE內核）

-moz-transform:translate(100px,100px);//-moz表明火狐【Firefox】內核識別碼

-webkit-transform:translate(100px,100px); //-webkit表明谷歌【Chrome】和蘋果【safari】內核識別碼

-o-transform:translate(100px,100px); //-o表明歐朋【opera】內核識別碼

transform:translate(100px,100px); //統一標識語句

transition過渡:

參數：
transition-property 要運動的樣式（all || [attr] || none）
transition-duration 運動時間
transition-delay 延遲時間
transition-timing-function 運動形式
ease：（逐漸變慢）默認值
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速後減速）
cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

例如：寬度在1s變寬，接着高度在2s變高，接着背景顏色改變（高度延遲了1s，這一秒鐘寬度正在變化）
.box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
.box:hover{width:500px;height:300px;background:blue;}

過渡完成事件：

Webkit內核： obj.addEventListener('WebkitTransitionEnd',function(){},false);

firefox: obj.addEventListener('transitionend',function(){},false);

添加過渡完成事件：在transition完成以後觸發
function addEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
移除過渡完成事件：
function removeEnd(obj,fn)
{
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}

2D變換 transform：

rotate() 旋轉函數取值度數（deg）
transform-origin 旋轉的基點，改變元素 x 和 y 軸，默認是center中心點。
skew() 傾斜函數取值度數
skewX()
skewY()
scale() 縮放函數取值正數、負數和小數
scaleX()
scaleY()
translate() 位移函數
translateX()
translateY()

transform 執行順序問題：後寫的變換先執行

matrix(a,b,c,d,e,f) 矩陣函數

默認：matrix(1,0,0,1,0,0)

經過矩陣實現縮放

x軸縮放 a=x*a c=x*c e=x*e;

y軸縮放 b=y*b d=y*d f=y*f;

經過矩陣實現位移

x軸位移: e=e+x

y軸位移: f=f+y

經過矩陣實現傾斜

x軸傾斜: c=Math.tan(xDeg/180*Math.PI)

y軸傾斜: b=Math.tan(yDeg/180*Math.PI)

經過矩陣實現旋轉

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

變換兼容IE9如下IE版本只能經過矩陣來實現：

filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');

IE下的矩陣沒有E和F兩個參數 M11==a; M12==c; M21==b; M22==d

3D變換：

transform-style：preserve-3d 給父級添加，創建3D空間

perspective：100px; 景深,離變換元素的垂直距離爲100px

perspective- origin 景深基點,觀察的角度，默認是center

transform 新增函數

rotateX()

rotateY()

rotateZ()

translateZ()

scaleZ()

animation：

一、animate——關鍵幀：

關鍵幀——keyframes

相似於flash

只需指明兩個狀態，之間的過程由計算機自動計算

關鍵幀的時間單位

數字：0%、25%、100%等；

字符：from(0%)、to(100%)；能夠只有to

格式

@keyframes 動畫名稱

{

動畫狀態

}

二、animate——調用動畫

調用的標籤(#div一、xxx:hover之類的)

eg：調用.box元素在4s內以無限次、勻速、一正一倒序執行domove動畫

.box{-webkit-animation:4s domove infinite linear alternate;}

必要屬性:

animation-name 動畫名稱（關鍵幀名稱）

animation-duration 動畫持續時間

例如：

-webkit-animation:miaov 4s;

-webkit-animation-name: ‘miaov';

-webkit-animation-duration: 4s;

可選屬性:

animation-play-state 播放狀態（ running 播放和paused 暫停）

animation-timing-function動畫運動形式：

linear 勻速。

ease 緩衝。

ease-in 由慢到快。

ease-out 由快到慢。

ease-in-out 由慢到快再到慢。

cubic-bezier(number, number, number, number) 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

animation-delay動畫延遲

只是第一次

animation-iteration-count重複次數：

infinite爲無限次

animation-direction 播放前重置：

動畫是否重置後再開始播放

alternate 動畫直接從上一次中止的位置開始執行

normal 動畫第二次直接跳到0%的狀態開始執行

三、animate——和JS結合

經過class:

在class里加入animation的各類屬性

直接給元素加-webkit-animation-xxx樣式

animation的問題:

寫起來麻煩

無法動態改變目標點位置

動畫end事件：

obj.addEventListener('webkitAnimationEnd', function (){}, false);

obj.addEventListener('animationend', function (){}, false);

相關標籤/搜索

每日一句

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