欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

第 19 章 CSS 其他样式 - 水之原

程序员文章站 2022-05-13 08:56:25
...

学习要点:

1.颜色和透明度

2.盒子阴影和轮廓

3.光标样式

主讲教师:李炎恢

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

一.颜色和透明度

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

属性

说明

CSS 版本

color

颜色值

设置文本前景色

1

p {
    color: red;
}

解释:设置文本颜色。

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

属性

说明

CSS 版本

opacity

0 ~ 1

设置元素的透明度

3

p {
    color: red;
    opacity: 0.5;
}

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

二.盒子阴影和轮廓

1.box-shadow

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

第 19 章 CSS 其他样式 - 水之原

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

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

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

div {
    width: 200px;
    height: 200px;
    border: 10px solid silver;
    outline: 10px double red;
}

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

三.光标样式

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

属性

说明

CSS 版本

cursor

光标样式

auto,default,none,context-men

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

1

div {
    cursor: move;
}

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