亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

CSS3邊框 陰影 box-shadow（一）

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

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

為元素設置內陰影：

示例代碼：

.box_shadow{???box-shadow:4px?2px?6px?#333333?inset;??}

效果：

添加多個陰影：

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

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

效果：

CSS3邊框 圓角效果 border-radius

實心上半圓：

方法：把高度(height)設為寬度（width）的一半，并且只設置左上角和右上角的半徑與元素的高度一致（大于也是可以的）。

div{
????height:50px;/*是width的一半*/
????width:100px;
????background:#9da;
????border-radius:50px?50px?0?0;/*半徑至少設置為height的值*/
????}

實心圓：
方法：把寬度（width）與高度(height)值設置為一致（也就是正方形），并且四個圓角值都設置為它們值的一半。如下代碼：

div{
????height:100px;/*與width設置一致*/
????width:100px;
????background:#9da;
????border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/
????}

用來將背景圖片做適當的裁剪以適應實際需要。

語法：

background-clip?：?border-box?|?padding-box?|?content-box?|?no-clip

參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip默認值為border-box。

效果如下圖所示：

設置元素背景圖片的原始起始位置。

語法：

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

參數分別表示背景圖片是從邊框，還是內邊距（默認值），或者是內容區域開始顯示。

效果如下：

需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

text-shadow可以用來設置文本的陰影效果。

語法：

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

X-Offset：表示陰影的水平偏移距離，其值為正值時陰影向右偏移，反之向左偏移；??????

Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；

Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置為0；

Color：是指陰影的顏色，其可以使用rgba色。

比如，我們可以用下面代碼實現設置陰影效果。

text-shadow:?0?1px?1px?#fff

@font-face能夠加載服務器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。

?

語法：

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

?

這樣設置之后，就可以像使用普通字體一樣在（font-*）中設置字體樣式。

比如：

p?{
????font-size?:12px;
????font-family?:?"My?Font";
????/*必須項，設置@font-face中font-family同樣的值*/
}

text-overflow用來設置是否使用一個省略標記（...）標示對象內文本的溢出。

語法：

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

text-overflow:ellipsis;?
overflow:hidden;?
white-space:nowrap;

同時，word-wrap也可以用來設置文本行為，當前行超過指定容器的邊界時是否斷開轉行。

語法：

normal為瀏覽器默認值，break-word設置在長單詞或?URL地址內部進行換行，此屬性不常用，用瀏覽器默認值即可。

線性漸變：

參數：

第一個參數:指定漸變方向，可以用“角度”的關鍵詞或“英文”來表示：

第一個參數省略時，默認為“180deg”，等同于“to?bottom”。

第二個和第三個參數，表示顏色的起始點和結束點，可以有多個顏色值。

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

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

語法：

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

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

代碼示例：

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

CSS3邊框 為邊框應用圖片 border-image

根據border-image的語法：

#border-image{
???background:#F4FFFA;
???width:210px;?height:210px;?border:70px?solid?#ddd;???border-image:url(borderimg.png)?70?repeat??}

1、陰影模糊半徑與陰影擴展半徑的區別

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

陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮??；

2、X軸偏移量和Y軸偏移量值可以設置為負數

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

box-shadow是向盒子添加陰影。

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

注意：inset 可以寫在參數的第一個或最后一個，其它位置是無效的

如果添加多個陰影，只需用逗號隔開即可。如：

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

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

X軸偏移量：從左到右偏移，可以為負

Y軸偏移量：從上到下偏移，可以為負

陰影模糊半徑：越大，陰影越模糊，當非常大時，就是實心，非常小也是實心，不能為負

陰影擴展半徑：值越大，陰影從四周到中心占的地方就越多，可以為負

投影方式：有兩個：inset:陰影在內部，不設置是外邊緣

加 inset 內陰影 不加 外陰影

例：box-shadow：4px 2px 6px #333333 inset;

barder-radius: 左上角 右上角 右小角 左下角

:nth-last-child(n)
用法與nth-child(n)類似
不同的是是從最后一項往前選定
同樣(n)可以為整數(1,2,3,4,5...)可以為多項式