這篇寫的是今天的學(xué)習(xí)到的屬性，一共20個。

屬性再多，但也要會使用，會在使用時可以記起它，才能起到它為我們所需要的作用。

樣式屬性

1、border

CSS邊框?qū)傩栽试S你指定一個元素邊框的樣式和顏色。

邊框樣式border-style

屬性用來定義邊框的樣式

none: 默認(rèn)無邊框

dotted: dotted:定義一個點(diǎn)線框

dashed: 定義一個虛線框

solid: 定義實(shí)線邊界

double: 定義兩個邊界。 兩個邊界的寬度和border-width的值相同

groove: 定義3D溝槽邊界。效果取決于邊界的顏色值

ridge: 定義3D脊邊界。效果取決于邊界的顏色值

inset:定義一個3D的嵌入邊框。效果取決于邊界的顏色值

outset: 定義一個3D突出邊框。 效果取決于邊界的顏色值

例子：

border-style: solid;

?邊框?qū)挾?border-width?

border-width:5px;

邊框顏色border-color

可以設(shè)置的顏色：

• name - 指定顏色的名稱，如 "red"
• RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
• Hex - 指定16進(jìn)制值, 如 "#ff0000"

您還可以設(shè)置邊框的顏色為"transparent"。

注意：?border-color單獨(dú)使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式。

border-color:#98bf21;

邊框-單獨(dú)設(shè)置各邊

例子：

?

border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;

?

邊框-簡寫屬性

border:5px solid red;

border-radius

?

向元素添加圓角邊框。

半圓例子：

div{width: 50px;height: 100px;border-radius: 50px 0 0 50px;background: red;}<div></div>

四個半徑值分別是左上角、右上角、右下角和左下角，順時針

置每個角的垂直半徑和水平半徑,用斜杠隔開，第一個參數(shù)表示左上角開始順時針的水平半徑，第二個參數(shù)表示左上角開始順時針的垂直半徑

這個圓角使盒模型豐富起來，之前只有矩形這個形狀，現(xiàn)在多了有弧度的形狀。

?

border-image?

邊框樣式使用圖像來填充。

border-image:url(圖片地址);

box-shadow

向盒子添加陰影

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

box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;

?line-height

控制段落內(nèi)每行高度

line-height:25px;

行高之所以會居中，是因?yàn)樗凶约河嬎惴绞?#xff0c;首先它會獲取font-size的大小，然后使用里line-height減去font-size

（line-height ?- ?font-size）得到值除以一半分配到字體的上和下，來實(shí)現(xiàn)居中，不過line-height小于font-size是不會

影響到字體的大小的。

?

text-indent

控制段落的首行縮進(jìn)

p { text-indent:2em;}

text-align

控制段落對齊方式，不但是文本，對象中的其它inline或inline-block元素也能夠被text- align進(jìn)行對齊方式的設(shè)置。

text-align : left | right | center | justify

p { text-align:center;}

letter-spacing?

控制段落的文字間的距離

p { letter-spacing:5px;}

text-overflow

控制文字內(nèi)容溢出部分的樣式

text-overflow：clip | ellipsis

clip ? ? ? ? ?當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分裁切掉。

ellipsis ? ??當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分替換為（...）。

但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實(shí)現(xiàn)溢出時產(chǎn)生省略號的效果，

還須定義強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），

只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號的效果。

white-space

規(guī)定段落中的文本不進(jìn)行換行

white-space 屬性設(shè)置如何處理元素內(nèi)的空白。

這個屬性聲明建立布局過程中如何處理元素中的空白符

nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。

例子：

div,input{overflow: hidden; /*條件1：超出部分隱藏*/white-space: nowrap;/*條件2：強(qiáng)制在同一行內(nèi)顯示所有文本*/text-overflow: ellipsis;/*超出部分顯示。。。*/ }

word-wrap

控制內(nèi)容超過容器的邊界時是否斷行

normal ? ? ? ? ??允許內(nèi)容頂開或溢出指定的容器邊界。

break-word ? ?內(nèi)容將在邊界內(nèi)換行。如果需要，單詞內(nèi)部允許斷行。

word-wrap: break-word;

background-color

背景顏色

background-color : transparent | color body { background-color:#CCCCCC;}

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-color:rgba(255 , 0 , 0 , .7);

linear-gradient

CSS3?Gradient?分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實(shí)現(xiàn)漸變的語法不同，

這里我們只針對線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法，其余大家可以查閱相關(guān)資料。W3C 語法已經(jīng)

得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

第一個參數(shù)表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從

左上角到右下角。第二個和第三個參數(shù)分別是起點(diǎn)顏色和終點(diǎn)顏色。你還可以在它們之間插入更多的參

數(shù)，表示多種顏色的漸變。

background-image:linear-gradient(to left, red 30%,blue);

?

??background-image

背景圖片

background-image : none | url ( url ) body { background-image:url(images/bg.gif);}

background-repeat?

背景平鋪方式

background-repeat : repeat | no-repeat | repeat-x | repeat-y

body { background-repeat:repeat-x;}

background-position

背景定位

background-position : 左對齊方式 ?上對齊方式?

body { background-position:left bottom;}

背景樣式縮寫

background: 背景色 背景圖片 背景平鋪方式 背景定位

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

?

知識擴(kuò)展：

w3c 里有外邊距的合并

http://www.w3school.com.cn/css/css_margin_collapsing.asp

?

標(biāo)準(zhǔn)流就是指在不使用其他的與排列和定位相關(guān)的特殊css規(guī)則時，各種元素的排列規(guī)則。

?

行內(nèi)元素和塊級元素在DOM樹中都是一個節(jié)點(diǎn)。從DOM的角度來看，塊級元素和行內(nèi)元素

是沒有區(qū)別的，都是樹上的一個節(jié)點(diǎn)；而從css的角度，二者有很大的區(qū)別，塊級元素?fù)碛?/p>

自己的區(qū)域，行內(nèi)元素則沒有。

再繼續(xù)昨天margin為負(fù)值的問題：

效果圖：

代碼：

#div1{width: 50px;height: 100px;border:2px solid #000;}.div2{width: 30px;height: 30px;border: 2px solid #333;margin-left:-10px; }<div id="div1"><div class="div2"></div></div>

從代碼可以看去它們是父子，但子級就是出了父級的范圍，在我們印象中應(yīng)該只有position這個

屬性可以做到這樣，但margin也能做到，這個就和上篇寫公式有關(guān)，因?yàn)樵跀?shù)學(xué)上它是合理的，

所以它不算違規(guī)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhangzhicheng/p/5762706.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的css之属性部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。