第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

CSS3文字與字體 text-overflow 與 word-wrap

text-overflow用來設(shè)置是否使用一個省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出。

但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實現(xiàn)溢出時產(chǎn)生省略號的效果，還須定義強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實現(xiàn)溢出文本顯示省略號的效果代碼如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowap;

同時，word-wrap也可以用來設(shè)置文本行為，當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。

word-wrap:normal|break-word

normal為瀏覽器默認(rèn)值，break-word設(shè)置在長單詞或?URL地址內(nèi)部進(jìn)行換行，此屬性不常用，用瀏覽器默認(rèn)值即可

CSS3顏色 漸變色彩?

CSS3?Gradient?分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實現(xiàn)漸變的語法不同，這里我們只針對線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法，其余大家可以查閱相關(guān)資料。W3C 語法已經(jīng)得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

這一小節(jié)我們來說一下線性漸變：

linear-gradient(to bottom,#fff,#999)

linear:漸變類型（線性）徑向：radial

to bottom:等價于180deg

#fff,#999:表顏色的起始點和結(jié)束點，可以有兩至多個色值

參數(shù)：

角度? ? ? ? ? ? ? ? ? ? 用英文? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作用

0de? ? ? ? ? ? ? ? ? ? to top? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 從下向上

90deg? ? ? ? ? ? ? ? to right? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 從左向右

180deg? ? ? ? ? ? ? ?to bottm? ? ? ? ? ? ? ? ? ? ? ? ? 從上向下

270deg? ? ? ? ? ? ? to left? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?從右向左

? ? ? ? ? ? ? ? ? ? ? ? ? to top left? ? ? ? ? ? ? ? ? ? ?右下角到左上角

? ? ? ? ? ? ? ? ? ? ? ? ? ?to top right? ? ? ? ? ? ? ? ?左下角到右上角

第二個和對三個參數(shù)，表示顏色的1起始點和結(jié)束點，可以有多個顏色色值。

background-image:linear_gradient(to left,red,orange,yellow,green,blue,indigo,violet);

CSS3顏色 顏色之RGBA

RGB是一種色彩標(biāo)準(zhǔn)，是由紅(R)、綠(G)、藍(lán)(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎(chǔ)上增加了控制alpha透明度的參數(shù)。

語法：

color：rgba(R,G,B,A)

以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分?jǐn)?shù)值。A為透明度參數(shù)，取值在0~1之間，不可為負(fù)值。

代碼示例：

background-color:rgba(100,120,60,0.5);

border-imgage的語法：

border-imagage：url(border.png) 70 70 70 70 repeat

url(border.png) 圖片路徑

70 切割圖片的寬度，單位為像素，但省略px也可以使用百分比，遵循順時針的規(guī)律分別設(shè)置，也可以簡寫為70.

repeat 圖片延伸方式

三個可選參數(shù)：round（平鋪）repeat(重復(fù))stretch(拉伸)

1、陰影模糊半徑與陰影擴(kuò)展半徑的區(qū)別

陰影模糊半徑：此參數(shù)可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個陰影都延展擴(kuò)大，反之值為負(fù)值時，則縮?。?/p>

2、X軸偏移量和Y軸偏移量值可以設(shè)置為負(fù)數(shù)

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];

X軸偏移量為負(fù)數(shù)：

.boxshadow-outset{
? ?width:100px;
? ?height:100px;
? ?box-shadow:-4px 4px 6px #666;
}

ox-shadow是向盒子添加陰影。支持添加一個或者多個。

很簡單的一段代碼，就實現(xiàn)了投影效果，酷斃了。我們來看下語法：

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];

添加多個陰影：

以上的語法的介紹，就這么簡單，如果添加多個陰影，只需用逗號隔開即可。如：

.box_shadow{
? ?box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的。

前綴? ? ? ? ? ?瀏覽器

? ?-webkit? ? ? ?chrome和safari

? ?-moz? ? ? ? ?firefox

? ?-ms? ? ? IE

? ?-o? ? ? ? ?opera

? ?

CSS3邊框

double雙線solid實線groove槽線ridge脊線dotted點線dashed虛線

CSS3顏色之RGBA

color：rgba(R,G,B,A)

以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分?jǐn)?shù)值。A為透明度參數(shù)，取值在0~1之間，不可為負(fù)值

表格邊框

border-collapse：collapse;相鄰邊被合并
border-collapse:separate;邊框獨立

1.圓角效果

border-radius是向元素添加圓角邊框（值用px，也可用百分比或em但是兼容性不太好）

設(shè)置四個屬性值，順序分別是左上角、右上角、右下角和左下角，順時針

2.陰影

box-shadow是向盒子添加陰影

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式]；

inset可設(shè)置投影方式為內(nèi)部陰影，省略則是外陰影

模糊半徑只能為正值

3.為邊框應(yīng)用圖片

圖像透明度opacity取值0~1

可以理解為它是一個切片工具，會自動把用做邊框的圖片切割。怎么切割呢？為了方便理解，做了一張?zhí)厥獾膱D片，由9個矩形（70*70像素）拼成的一張圖（210*210像素），并標(biāo)注好序號，是不是像傳說中的九宮圖

Round 參數(shù)：Round可以理解為圓滿的鋪滿。為了實現(xiàn)圓滿所以會壓縮（或拉伸

根據(jù)border-image的語法：

CSS3變形

旋轉(zhuǎn)rotate()

扭曲skew()

縮放scale()讓元素根據(jù)中心原點對對象進(jìn)行縮放

位移translate()使用此函數(shù)可以元素從原來的位置進(jìn)行移動，而不影響在x,y軸的任何web組件

矩陣matrix()是一個含有6個值的(a,b,c,d,e,f)變換矩陣,用來指定一個2D變換，相當(dāng)于直接應(yīng)用一個[a b c d e f]變換矩陣.就是

基于水平方向X軸和垂直方向Y軸重新定位元素

原點transform-origin? 取值：

CSS變形進(jìn)行的旋轉(zhuǎn)、位移、縮放，扭曲等操作都是以元素自己中心位置進(jìn)行變形，但很多時候我們可以通過

transform-origin改變原點位置

在Responsive布局中，可以毫無保留的丟棄：

第一，?盡量少用無關(guān)緊要的div；

第二，不要使用內(nèi)聯(lián)元素（inline）；

第三，盡量少用JS或flash；

第四，丟棄沒用的絕對定位和浮動樣式；

第五，摒棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置。

-webkit? 對應(yīng)chrome和safari

-moz? 對應(yīng)firefox

-ms 對應(yīng)IE

-o? ? 對應(yīng)opera

如果只表示偏移，matrix只要關(guān)注參數(shù)e和f就好，前面幾個參數(shù)大家隨意；如果表示縮放，則只關(guān)注參數(shù)a和d，a表示x軸，d表示y軸縮放；如果表示旋轉(zhuǎn)，abcd分別表示cosθ,sinθ,-sinθ,cosθ；拉伸就用到b,c兩個參數(shù)，分別表示tan(x)和tan(y)。說實話。。這很復(fù)雜啊。不過用martix才可以實現(xiàn)高端大氣上檔次的效果啊

resize屬性主要是用來改變元素尺寸大小的，其主要目的是增強用戶體驗。但使用方法卻是極其的簡單，先從其語法入手。

resize: none | both | horizontal | vertical | inherit

取值說明：

屬性值

取值說明

none

用戶不能拖動元素修改尺寸大小。

both

用戶可以拖動元素，同時修改元素的寬度和高度

horizontal

用戶可以拖動元素，僅可以修改元素的寬度，但不能修改元素的高度。

vertical

用戶可以拖動元素，僅可以修改元素的高度，但不能修改元素的寬度。

inherit

繼承父元素的resize屬性值。
textarea {
? -webkit-resize: horizontal;
? -moz-resize: horizontal;
? -o-resize: horizontal;
? -ms-resize: horizontal;
? resize: horizontal;
}

@media screen and (max-width : 1024px) {???????????????????
/* 樣式寫在這里 */?????????
}????
@media screen and (max-device-width: 1024px) and (orientation: landscape) {?????????????
/* 樣式寫在這 */???????????
}????
@media screen and (max-device-width: 1024px) and (orientation: landscape) {?????????????
/* 樣式寫在這 */???????????
}????
@media screen and (max-device-width: 768px) and (orientation: portrait) {????????
/* 樣式寫在這 */???????????
}????
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {?????????????
/* 樣式寫在這 */???????????
}????

各種設(shè)備都能瀏覽網(wǎng)頁
網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)；引用到網(wǎng)站的圖片必須是可伸縮的；不同的顯示風(fēng)格，需要在Media Queries上寫不同的樣式。

1.流體網(wǎng)格
流體網(wǎng)格是一個簡單的網(wǎng)格系統(tǒng)，這種網(wǎng)格設(shè)計參考了流體設(shè)計中的網(wǎng)格系統(tǒng)，將每個網(wǎng)格格子使用百分比單位來控制網(wǎng)格大小。這種網(wǎng)格系統(tǒng)最大的好處是讓你的網(wǎng)格大小隨時根據(jù)屏幕尺寸大小做出相對應(yīng)的比例縮放。

2.彈性圖片
彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行縮放，用于適應(yīng)各種網(wǎng)格的尺寸
img {max-width:100%;}