第七十六节，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>