css學習記錄

1、瀏覽器字首

ie: -ms-

firefox:-moz-

opera: -o-

chrome和safari: -webkit

-webkit是webkit核心

-moz-是firefox gecko核心，moz代表的是firefox生產廠商mozilla

瀏覽器核心：

二、gecko核心代表作品mozilla firefoxgecko是一套開放源**的、以c++編寫的網頁排版引擎。gecko是最流行的排版引擎之一，僅次於trident。使用它的最著名瀏覽器有firefox、netscape6至9。

三、webkit核心代表作品safari、chromewebkit 是乙個開源專案，包含了來自kde專案和蘋果公司的一些元件，主要用於mac os系統，它的特點在於原始碼結構清晰、渲染速度極快。缺點是對網頁**的相容性不高，導致一些編寫不標準的網頁無法正常顯示。主要代表作品有safari和google的瀏覽器chrome。

4 四、presto核心代表作品operapresto是由opera software開發的瀏覽器排版引擎，供opera 7.0及以上使用。它取代了舊版opera 4至6版本使用的elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著dom及script語法的事件而重新排版。

2、邊框：

border-radius: 可以用百分比設定。比如： border-radius: 50%;

box-shadow: 設定乙個或多個陰影

box-shadow: h-shadow v-shadow blur spread color inset;

值

描述h-shadow

必需。水平陰影的位置。允許負值。

v-shadow

必需。垂直陰影的位置。允許負值。

blur

可選。模糊距離。

spread

可選。陰影的尺寸。

color

可選。陰影的顏色。請參閱 css 顏色值。

inset

可選。將外部陰影 (outset) 改為內部陰影。

border-image: 邊框

internet explorer 11, firefox, opera 15, chrome 以及 safari 6 支援 border-image 屬性。

safari 5 支援替代的 -webkit-border-image 屬性。值描述

測試border-image-source

用在邊框的的路徑。

border-image-slice

邊框向內偏移。

border-image-width

邊框的寬度。

border-image-outset

邊框影象區域超出邊框的量。

border-image-repeat

影象邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

例子：如何設定半透明邊

框rgba:是一種css顏色，可以設定不透明度。可以使用百分比來設定

rgba(red, green, blue, alpha)

hsla: 是一種顏色

hsla(h,s,l,a)

h：hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360

s：saturation(飽和度)。取值為：0.0% - 100.0%

l：lightness(亮度)。取值為：0.0% - 100.0%

a：alpha透明度。取值0~1之間。

摘錄補充：

hsl色彩空間中，h（hue）：代表色調，s（saturation）：代表飽和度，l（lightness）：代表亮度，（a（alpha）：代表不透明度）。hsl是一種圓柱座標系，其座標系圖如下：

如上圖：

h是色度，取值在0度~360度之間，0度是紅色，120度是綠色，240度是藍色。360度也是紅色。

s是飽和度，是色彩的純度，是乙個百分比的值，取值在0%~100%，0%飽和度最低，100%飽和度最高

l是亮度，也是乙個百分比值，取值在0%~100%，0%最暗，100%最亮。

a是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

例子：如何設定多邊框

box -shadow:0 0010px #655, 0 0 0 15px deeppink;

使用outline-offset可以實現內縫線效果

3、背景

background-size: 規定背景的尺寸。如用百分比設定，則為父元素的高度和寬度

background-size: length|percentage|cover|contain;

值

描述測試

length

設定背景影象的高度和寬度。

第乙個值設定寬度，第二個值設定高度。

如果只設定乙個值，則第二個值會被設定為 "auto"。

percentage

以父元素的百分比來設定背景影象的寬度和高度。

第乙個值設定寬度，第二個值設定高度。

如果只設定乙個值，則第二個值會被設定為 "auto"。

cover

把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。

背景影象的某些部分也許無法顯示在背景定位區域中。

contain

把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。

background-origin: 背景的定位區域

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

值

描述測試

padding-box

背景影象相對於內邊距框來定位。

測試border-box

背景影象相對於邊框盒來定位。

測試content-box

背景影象相對於內容框來定位。

background-clip:背景的繪製區域：

background-clip: border-box|padding-box|content-box;

值

描述測試

border-box

背景被裁剪到邊框盒。

測試padding-box

背景被裁剪到內邊距框。

測試content-box

背景被裁剪到內容框。

background-image: 可設定多個背景

1）使用background-position:允許背景距離任意角的偏移量

background -position :right 20px bottom 10px

;

2）使用calc()計算

background
-position
:calc
(100%-
20px
)calc
(100%-
10px
);

瀏覽器對calc()的相容性還算不錯，在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支援，其他的全軍覆沒。

大家在實際使用時，同樣需要新增瀏覽器的字首

.elm

例2 顏色漸變

背景斜線

background
:linear
-gradient
(#fb3, #58a);

background
:#58a;
background
-image
:repeating
-linear
-gradient
(30deg
,hsla(0
,0%,100
%,.1
),hsla(0
,0%,100
%,.1
)15px
,transparent 0,
transparent 
30px
);

徑向漸變

background
:#655;
background
-image
:radial
-gradient
(tan 
30%,
transparent 0);
background
-size
:30px
30px
;

加強版：

repeating-linear-gradient()和repeating-radial-gradient()

4、形狀

border-radius:可以單獨指定垂直或水平的半徑，用/隔開 border-radius: 100px/75px 還可用百分比 border-radius:50%/50%，生成自適應的圓形

css學習記錄

css學習記錄

css學習記錄

css學習記錄（一）

相關推薦