css3 透明度陰影，圓角,邊框背景

先了解一下目前的幾種現代瀏覽器的核心，主流內容主要有

mozilla（gecko）（熟悉的有firefox，flock等瀏覽器）-moz-

webkit（熟悉的有safari、chrome等瀏覽器）-webkit-

opera(presto)（opera瀏覽器）-o-

trident（ie瀏覽器）-ms-

透明度

》css2中的透明度

filter: alpha(opacity=80);

-ms-filter:"progid:dximagetransform.microsoft.alpha(opacity=80)";

opacity: 0.8;

缺點：opacity後代元素會隨著一起具有透明性

》 css3中透明度可與顏色一起設定

rgba

r：紅色值。正整數 | 百分數

g：綠色值。正整數 | 百分數

b：藍色值。正整數| 百分數

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

在解決ie8-的相容問題上

.rgba

startcolorstr和endcolorstr的值#80000000,其中前兩位是十六進製制的透明度80,也就是透明值為0.5而後面六位是十六進製制的顏色

可與陰影、漸變結合使用

陰影

》text-shadow: x-offset y-offset blur color;//文字陰影

相容性

相容ie的寫法

元素 color用於設定物件的陰影色；

direction用於設定投影的主向，取值為0即零度（表示向上方向），45為右上，90為右，135為右下，180為下方，225為左下方，270為左方，315為左上方；

strength就是強度，類似於text-shadow中的blur值。

》box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];

x-offset(必須):陰影水平偏移量，值為正值陰影在物件的右邊，反之陰影在物件的左邊；

y-offset(必須):陰影垂直偏移量，值為正值陰影在物件的底部，反之陰影在物件的頂部；

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

陰影擴充套件半徑（可選）:值為正，則整個陰影都延展擴大，反之值則縮小

陰影顏色（可選）:各瀏覽器預設色不一樣，特別是在webkit核心下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此引數。

投影方式：預設為外投影，insert為內投影

相容性：

法一：filter: progid:dximagetransform.microsoft.shadow(color=』顏色值』, direction=陰影角度（數值）, strength=陰影半徑（數值）);

注：該濾鏡

必須配合background屬性一起使用，否則該濾鏡失效

法二：jquery的外掛程式

jquery.boxshadow.js，

$(document).ready(function()

});陰影不會影響頁面的任何布局，有時可替換border

》新增多個陰影：

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

.box_shadow

效果：

》drop-shadow效果（firefox3.5+/chrome5+/safari5+/opera10.6+/ie9+。）原理：僅用乙個div標籤元素，然後配合其兩個偽元素":before"和":after"，然後分別給其偽元素定位到div的後面，並把box-shadow應用到這兩個偽元素上，同時利用transform的rotate對陰影進行旋轉

邊框背景

》border-image的語法：

repeat：就是一直重複，然後超出部分剪裁掉，而且是居中開始重複

round：round可以理解為圓滿的鋪滿。為了實現圓滿所以會壓縮

stretch：很好理解就是拉伸，有多長拉多長。有多遠「滾」多遠。

切割後的四周的八個切片，四個角根據border設定的大小全尺寸自動縮放顯示到border對應的四個角。

除四個角外的其他中間切片（上中，右中間，下中，左中間），可以根據設定做拉伸或重複的設定操作顯示到對應的border位置

圓角

常見的寫法

簡寫：border-radius: 5px 4px 3px 2px;//分別為左上角，右上角，右下角，左下角，順時針轉

拆開寫：

border-top-left-radius: ； //左上角

border-top-right-radius: ； //右上角

border-bottom-right-radius: ；//右下角

border-bottom-left-radius: ； //左下角

border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;「/」前是指圓角的水平半徑，而「/」後是指圓角的垂直半徑

等價於相容性

1、firefox4.0+、safari5.0+、google chrome 10.0+、opera 10.5+、ie9+

2、在img上應用border-radius到目前只有firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對進行剪下

3、內半徑和外半徑的區別：當border-radius半徑值小於或等於border的厚度時，邊框內部就不具有圓角效果

4、table的樣式屬性border-collapse是collapse時,border-radius不能正常顯示,只有border-collapse: separate;時才能正常顯示。

語法：color：rgba(r,g,b,a)；background-color:rgba(r,g,b,a)；

r、g、b三個引數，正整數值的取值範圍為：0 - 255。百分數值的取值範圍為：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支援使用百分數值。a為透明度引數，取值在0~1之間，不可為負值。

css3 透明度陰影，圓角,邊框背景

圓角陰影透明度和運動曲線

CSS設定背景透明度

CSS控制背景透明度

css3 透明度 陰影，圓角,邊框背景

圓角 陰影 透明度和運動曲線

CSS設定背景透明度

CSS控制背景透明度

相關推薦

css3 透明度陰影，圓角,邊框背景

圓角陰影透明度和運動曲線