第七十六節，css顏色和透明度,盒子陰影和輪廓,光標樣式

css顏色和透明度,盒子陰影和輪廓,光標樣式

 

 

學習要點：
1.顏色和透明度
2.盒子陰影和輪廓
3.光標樣式

 

一．顏色和透明度
顏色咱們以前其實已經用的不少了，好比字體顏色、背景顏色、邊框顏色。但除了背景顏色和邊框顏色講解過，字體顏色卻沒有系統的講解過。設置字體顏色其實也成爲文本塊的前景色。

 

color設置文本顏色

            屬性               值                 說明                              CSS版本

            color             顏色值          設置文本前景色                    1

div > span{
    color: #1e1eff;
}

<div><span>這是一段文本</span></div>

 

opacity設置元素的透明度

           屬性               值                  說明                               CSS版本

           opacity          0 ~ 1            設置元素的透明度                    3

div > span{
    background-color: #ff2b1c;
    opacity: 0.5;
}

<div><span>這是一段文本</span></div>

 

二．盒子陰影和輪廓 

 

box-shadow陰影效果

CSS3提供了一個很是實用的效果樣式，就是陰影效果。經過box-shadow屬性來實現樣式表以下：CSS版本3

         屬性           　　　值               　　　　 說明                                                                                       

   box-shadow     　 hoffset          　　　   陰影的水平偏移量，是一個長度值，                                              

                                                  　　　　  正值表示陰影向右偏移，負值表示陰影向左偏移。  

                         

                                voffset                     陰影的垂直偏移量，是一個長度值，正值表明陰影位於元素盒子的下方， 

                                                  　　        負值表明陰影位於元素盒子 上方。

 

                          　　 blur                       （可選）指定模糊值，是一個長度值，值越大盒子的邊界越模糊。                           

                                                               默認值爲0，邊界清晰    

 

                                 spread                   （可選）指定陰影延伸半徑，是一個長度值，                                                    

                                                               正值表明陰影向盒子各個方向延伸擴大，負值表明陰影沿相反方向縮小    

 

                                 color                      （可選）設置陰影的顏色，若是省略，瀏覽器會自行選擇一個顏色                          

 

                                 inset                      （可選）將外部陰影設置爲內部陰影                                         　　　　　　　　  

div{
    width: 200px;
    height: 200px;
    border: 10px solid #1dc01e;
    box-shadow: 5px 4px 10px 8px gray;
}

<div>這是一段文本</div>

實現內部陰影

box-shadow: 5px4px 10px 2px gray inset;

 

outline在邊框的外圍再增長一圈輪廓

CSS3還提供了輪廓樣式，它和邊框同樣，只不過它能夠在邊框的外圍再加一層。樣式表以下： 

            屬性              　　值                  　　　　　　　　  說明                 　　　　　　　　CSS版本

       outline-color      　  顏色  　　　　　　　　　　　　  外圍輪廓的顏色                              3

      outline-offset     　  長度  　　　　　　　　　　　　  輪廓距離元素邊框邊緣的偏移量          3

       outline-style           樣式  　　　　　　　　　　　　  輪廓樣式，和border-style一致         3

       ontline-witdh      　長度  　　　　　　　　　　　　  輪廓寬度                                        3

          outline         　　 簡寫  　　　　　　　　             <顏色> <樣式> <寬度>                   3

div{
    width: 200px;
    height: 200px;
    border: 10px solid #1dc01e;
    outline: #c04725 solid 3px;
}

<div>這是一段文本</div>

 

三．光標樣式
咱們不但能夠指定頁面上的元素樣式，就連光標的樣式也能夠指定。樣式表以下：

cursor設置當前元素的光標

      屬性            　　　　　　值                     　　　　　　　　　　說明                     CSS版本

    cursor                  auto,default,none,context-men               光標樣式                     1

                                u,help,pointer,progress,wait,

                                cell,crosshair,text,vertical-

                                text,alias,copy,move,no-drop,

                                not-allowed,e-resize,n-resize　　　　　　　　　　　　　　                     

                                ,ne-resize,nw-resize,s-resize

                                ,se-resize,sw-resize,w-resize

                                ,ew-resize,ns-resize,nesw-res

                                ize,nwse-resize,col-resize,ro

                                w-resize,all-scroll

div{
    width: 200px;
    height: 200px;
    border: 10px solid #1dc01e;
    cursor: pointer;
}

<div>這是一段文本</div>