学习要点:

    1.颜色和透明度

    2.盒子阴影和轮廓

    3.光标样式

    主讲教师:李炎恢

    本章主要探讨 HTML5 中 CSS 其他剩下几个常用的样式,包括颜色、透明度、盒子的阴影轮廓以及光标的样式。

    一.颜色和透明度

    颜色我们之前其实已经用的很多了,比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过,字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。

    属性说明CSS 版本
    color颜色值设置文本前景色1
      1. p { color: red;
      2. }

    解释:设置文本颜色。

    CSS3 提供了一个属性 opacity,可以设置元素的透明度。

    属性说明CSS 版本
    opacity0 ~ 1设置元素的透明度3
      1. p { color: red; opacity: 0.5;
      2. }

    解释:设置元素的透明度。

    二.盒子阴影和轮廓

    1.box-shadow

    CSS3 提供了一个非常实用的效果样式,就是阴影效果。通过 box-shadow 属性来实现,样式表如下:

    第 19 章 CSS 其他样式 - 图1

      1. div { width: 200px; height: 200px; border: 10px solid silver; box-shadow: 5px 4px 10px 2px gray;
      2. }

    解释:给元素盒子增加阴影效果。

      1. box-shadow: 5px 4px 10px 2px gray inset;

    解释:实现内部阴影。

    2.outline

    CSS3 还提供了轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。样式表如下:

    属性说明CSS 版本
    outline-color颜色外围轮廓的颜色3
    outline-offset长度轮廓距离元素边框边缘的偏移量3
    outline-style样式轮廓样式,和 border-style 一致3
    ontline-witdh长度轮廓宽度3
    outline简写<颜色> <样式> <宽度>3
      1. div { width: 200px; height: 200px; border: 10px solid silver; outline: 10px double red;
      2. }

    解释:在边框的外围再增加一圈轮廓。

    三.光标样式

    我们不但可以指定页面上的元素样式,就连光标的样式也可以指定。样式表如下:

    属性说明CSS 版本
    cursor光标样式auto,default,none,context-menu,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-resize,nwse-resize,col-resize,row-resize,all-scroll1
      1. div { cursor: move;
      2. }

    解释:设置当前元素的光标为移动光标。

    原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/25.html