一：邊框樣式

　　1.邊框線

　　border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset? | outset ?

　　例：div { width:300px; height:100px; border-style:solid; ｝

　　　　　　　　 border-top-style ? 設(shè)置上邊框線

?　　　　　　　　border-bottom-style ? 設(shè)置下邊框線

?　　　　　　　　border-left-style ? 設(shè)置左邊框線

?　　　　　　　　border-right-style ? 設(shè)置右邊框線

　　

　　2.邊框?qū)挾?/p>

?　　border-width : medium | thin | thick | length ?

?　　例：?

?　　div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

?　　border-top-width ? 設(shè)置上邊框?qū)挾?/p>

?　　border-bottom-width ? 設(shè)置下邊框?qū)挾?/p>

?　　border-left-width ? 設(shè)置左邊框?qū)挾?/p>

?　　border-right-width ? 設(shè)置右邊框?qū)挾?/p>

　　

　　3.邊框顏色

?　　border-color : color ?

?　　例：div {width:300px;

　　height:100px;

　　border-style:solid;

　　border-width:1px;

　　border-color:#FF0000;

　　}

?

　　 border-top-color ? 設(shè)置上邊框顏色

?　　border-bottom-color ? 設(shè)置下邊框顏色

?　　border-left-color ? 設(shè)置左邊框顏色

?　　border-right-color ? 設(shè)置右邊框顏

　　

　　4.邊框樣式縮寫

?　　border : border-width || border-style || border-color

　　例：

　　div {

? 　　width:300px;

?　　 height:100px;

?　　 border-style:solid;

? 　　border-width:1px;

? 　　border-color:#FF0000;

　　}

　　縮寫后：

　　div {

? 　　width:300px;

?　　 height:100px;

?　　 border:1px solid #FF0000;

　　}

?

　　5.圓角效果

　　border-radius : [?<length>?|?<percentage>?]{1,4} [ / 　　

　　? [?<length>?|?<percentage>?]{1,4} ]?

　　向元素添加圓角邊框。

　　　　例子：

　　/* 所有角都使用半徑為10px的圓角 */?

　　div{ border-radius:10px;} ?

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

　　div{ border-radius: 5px 4px 3px 2px;?}

?

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

　　div{ border-radius: 10px 20px 30px 40px? /? 5px 10px 15px 20px;?}　

　　/*圓*/

　　div{ border-radius:50% }

?

?

　　

　　6.邊框圖片(課外擴(kuò)展)

　　border-image：<'?border-image-source?'> || <'?border-image-slice?'> [ / <'?border-image-width?'> | / <'?border-image-width?'>? / <'?border-image-outset?'> ]? || <'?border-image-repeat'>

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

?

　　

　　注意：

　　border-image-slice ： 是一個數(shù)值或百分比，不需要帶單位（特指px）

　　設(shè)置了border-image之后，border-style則不顯示

?

　　例子：

　　.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

?

　　

?　　7.盒子陰影(課外擴(kuò)展)

　　box-shadow :none |?<shadow>?[ ,?<shadow>?]*

　　<shadow>?= inset? &&?<length>{2,4} &&?<color>?

?

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

　　

　　使用方法：

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

　　例：

　　.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); }? ? ??????????/*外陰影常規(guī)效果*/

?

　　.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }/*外陰影模糊外延效果*/

?

　　.inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; }?? /*內(nèi)陰影效果*/

?

?

二：段落樣式

　　1.行高

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

　　line-height : normal | length

?

　　例：?

　　p { line-height:25px;}

　　p { line-height:150%}

?

　　2.段落縮進(jìn)

　　

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

?　　text-indent : length

?　　例：

　　 p { text-indent:2em;}

?

　　3.段落對齊

　　

　　控制段落對齊方式，不但是文本，對象中的其它inline或inline-block元素也能夠被text-

　　align進(jìn)行對齊方式的設(shè)置。

?

　　text-align : left | right | center | justify

　　例：?

　　p { text-align:right;}

? 　 p { text-align:center;}

?

　　4.文字間距

　　控制段落的文字間的距離

?

　　letter-spacing : normal | length　　

　　例：

　　p { letter-spacing:5px;}

　　

　　5.文字溢出

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

　　

　　

　　例子：

　　div,input{

? 　　overflow: hidden;? /*條件1：超出部分隱藏*/

? 　　white-space: nowrap;/*條件2：強制在同一行內(nèi)顯示所有文本*/

? 　　text-overflow: ellipsis;/*超出部分顯示。。。*/

?

　　6.段落換行

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

　　 語法：

　　?word-wrap：normal | break-word

　　

?

?

三：背景樣式

　　

?

?

　　

　　

　　

?

?

?

?

?

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

總結(jié)

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

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