CSS快速学习8：圆角切图、滚动条和图片整合技术

来源：互联网发布：js 数组重复元素编辑：程序博客网时间：2024/05/16 19:40

圆角切图

1、css 书写

border-radius：左上角右上角右下角左下角

border-radius：左上角右下角右上角左下角(对角线)

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

2、切图拼接

滚动条

1、Overflow内容溢出时的设置

属性：

overflow 水平及垂直方向内容溢出时的设置

overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的属性值：

visible、scroll、hidden、auto、

visible 默认值，其中的内容无论是否超出范围都将被显示。

hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏。

scroll 无论内容是否超越范围，都将显示滚动条。

auto 当内容超出范围时，显示滚动条，否则不显示。

应用:

1、

1）没有水平滚动条:

2）没有垂直滚动条

3）没有滚动条

<div style="overflow-x:hidden;overflow-y:hidden" 或

style="overflow:hidden">test</div>

4）自动显示滚动条

2、自己定义滚动条的颜色

scrollbar-face-color(立体滚动条凸出部分的颜色)

scrollbar-highlight-color(滚动条背景条的颜色)

scrollbar-base-color(滚动条背景的亮光色，基底)

scrollbar-arrow-color(上下按钮三角箭头的颜色)

scrollbar-shadow-color(立体滚动条阴影的颜色)(滑动滚动条边框色,ie显示)

scrollbar-dark-shadow-color(立体滚动条强阴影的颜色（浏览器不显示）)

以上适用与<body>、<div>、<textarea>、<iframe>

Flash和marquee(滚动字幕)

1、插入flash

1）语法：

（其他浏览器识别）

</embed> （ie浏览器识别）

</object>

说明：

flash源文件格式.fla,

导出影片为.swf,

创建播放器格式为.exe.

2）将flash背景设置为透明

给<embed>标记添加属性：wmode="transparent"

3）IE中不显示flash,可做如下操作：

A.下载安装flash player;

B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用：

<marquee

behavior="scroll/alternate" direction="up/down/left/right"

scrollamount="value"

height="value"

width="">

内容

</marquee>

说明：

behavior（行为）="scroll(滚动)/alternate（晃动）

direction（方向）="up(从下向上)/down（从上向下）

/left（从右向左）/right（从左向右）“

scrollamount（滚动速度）="value"

height="value(上下滚动范围)"

width=""(左右滚动范围)

CSS Sprites的原理（图片整合技术）

一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。

二、图片整合的优势：

1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

2）通过整合图片来减小图片的体积。

2、CSS Sprites的实现方法

滑动门技术

1.什么是滑动门

滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果

2.滑动门特征：

通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性。

0 0