CSS基礎詳解3

2021-06-26 12:27:24 字數 2533 閱讀 1463

邊框

1.border屬性配置圍繞元素的邊框。邊框預設設為0,且不顯示。

屬性名稱

說明和常用值

border

簡寫方式同時配置元素的border-width,border-style和border-color;不同屬性值以空格分隔

border-top

頂部邊框;border-width,border-style和border-color的值以空格分隔

border-right

右側邊框;border-width,border-style和border-color的值以空格分隔

border-bottom

底部邊框;border-width,border-style和border-color的值以空格分隔

border-left

左側邊框;border-width,border-style和border-color的值以空格分隔

border-width

邊框粗細;畫素值或表達粗細的英文詞(thin,medium,thick)

border-style

邊框樣式;包括none, inset, outset, double, groove, ridge, solid, dashed, dotted

border-color

邊框顏色;有效顏色值

css3圓角

1.css3引入border-radius屬性,可用來建立圓角。圓角編碼需三個不同樣式宣告:

如果想顯示乙個可見的邊框,先配置border屬性,再把圓角屬性設為20px以下獲得最佳效果。

border:1px solid #000000;

-webkit-border-radius:15px;

-moz-border-radius:15px;

border-radius:15px;

居中整個網頁內容

關鍵在於div元素來包含整個網頁內容。然後配置這個容器的css樣式規則。將width設定為合適的值(960-1002px),將margin-left和margin-right屬性設為auto,瀏覽器自動分配左右邊距。

......網頁內容......

#content

陰影效果

1.box-shadow屬性為框模型建立陰影效果,webkit和gecko瀏覽器渲染引擎不同,需編碼三個樣式,每個宣告提供4個值。

-webkit-box-shadow: 5px 5px 5px #828282;

-moz-box-shadow: 5px 5px 5px #828282;

box-shadow: 5px 5px 5px #828282;

同樣,text-shadow文字陰影屬性也要求4個值(ie9不支援)。例如:

text-shadow: 3px 3px 3px #666;

2.opacity屬性配置背景顏色的透明度。opacity的值從0(完全透明)到1(完全不透明)。ie9之前支援filter屬性,配置1(透明)到100(不透明)之間的opacity級別。例如:

filter: alpha(opacity=60);

css3 rgba顏色

1.rgba顏色不是使用十六進製制,而是使用十進位制顏色值。紅綠藍必須是0到255的十進位制值。alpha值必須在0(透明)到1(不透明)。

2.不是所有的瀏覽器都支援rgba顏色,所以要配置color兩次,較新瀏覽器會按照編碼順序應用。

color:#ffffff;

color:rgba(255,255,255,0.8);

css3漸變

1.使用css3漸變時注意漸進式增強,要配置乙個後備的background-color屬性或background-image屬性。

2.編碼4個樣式宣告來配置漸變顏色:

線性漸變(linear-gradient)和放射性漸變(radial-gradient)使用不同的函式。

background-color:#8fa5ce;

background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#8fa5ce));

background-image:-moz-linear-gradient(top,#ffffff,#8fa5ce);

filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#ff8fa5ce);

background-image:linear-gradient(#ffffff,#8fa5ce);

CSS3之box shadow基礎詳解

引數值 描述h shadow x軸偏移量 必需。水平陰影的位置。允許負值。v shadow y軸偏移量 必需。垂直陰影的位置。允許負值。blur 陰影模糊半徑 可選。模糊距離。spread 陰影擴充套件半徑 可選。陰影的尺寸。color 陰影顏色 可選。陰影的顏色。請參閱 css 顏色值。inset...

CSS基礎詳解

目錄 標籤選擇器 類選擇器 id選擇器 萬用字元選擇器 字型屬性 文字裝飾 文字縮排 行間距內部樣式表 行內樣式表 外部樣式表 標籤選擇器,顧名思義,就是確定是哪個標籤的,p標籤了,div標籤了等等等吧,其特點就是如果你選擇了p標籤,那麼所有的p標籤的樣式都會服從你的定義,同理div等其他標籤也是這...

CSS3 基礎 1 選擇器詳解

css3選擇器詳解 一 屬性選擇器 在css3中,追加了三個屬性選擇器分別為 att val att val 和 att val 使得屬性選擇器有了萬用字元的概念。選擇器示例 描述 attribute value 選擇每乙個src屬性的值以 https 開頭的元素 attribute value s...