第19章 CSS其他样式

2017年9月10日07:00:20 发表评论

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

一.颜色和透明度

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

p {
    color: red;
}

解释:设置文本颜色。

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

p {
    color: red;
    opacity: 0.5;
}

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

二.盒子阴影和轮廓

1.box-shadow

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

属性 说明 CSS 版本
 

 

box-shadow

hoffset

阴影的水平偏移量,是一个长度

值, 正值表示阴影向右偏移, 负值表示阴影向左偏移

3
voffset

阴影的垂直偏移量,是一个长度

值, 正值代表阴影位于元素盒子的下方, 负值代表阴影位于元素盒子上方

3
blur

(可选) 指定模糊值, 是一个长度值, 值越大盒子的边界越模糊。 默认值为 0,边界清晰

3
spread

(可选) 指定阴影延伸半径, 是一个长度值, 正值代表阴影向盒子各个方向延伸扩大, 负值代表阴影沿相反方向缩小

3
color

(可选) 设置阴影的颜色, 如果省略,浏览器会自行选择一个颜色

3
inset

(可选) 将外部阴影设置为内部阴影

3
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;
}

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

三.光标样式

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

div {
    cursor: move;
}

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

注:本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: