本文介绍了CSS中关于滚动条的样式定制，如何实现元素拖动效果，以及如何使用轮廓线来突出元素边界。通过实例详细讲解了CSS3在这些方面的应用。
一、理论：
1.overflow-x/overflow-y
a.visible 默认值,不添加滚动条
b.auto 添加滚动条
c.hidden 内容溢出容器时，所有内容都将隐藏，不显示滚动条
d.scroll 不论有无溢出，都显示滚动条
e.no-display 当内容溢出容器时不显示元素
f.no-content 当内容溢出容器时不显示内容
2.resize
a.none 用户不能拖动元素修改尺寸大小
b.both 用户可以拖动元素，同时修改元素的宽度和高度
c.horizontal 用户可以拖动元素，但只能改动宽度
d.vertical 用户可以拖动元素，但只能改动高度
e.inherit 继承父元素的resize属性值
3.outline
a.outline 颜色、样式、宽度、偏移值
4.outline与border线的对比
a.border属于盒模型的一部分，outline的轮廓线不会破坏网页布局
b.outline创建的外轮廓线在元素各边都一样
c.border创建的元素可以单边设置，outline创建的外轮廓线是闭合的
d.border仅可以设置元素的边框，只能向外扩展,outline可以向元素内部创建封闭的轮廓
1.overflow-x/overflow-y
a.visible 默认值,不添加滚动条
b.auto 添加滚动条
c.hidden 内容溢出容器时，所有内容都将隐藏，不显示滚动条
d.scroll 不论有无溢出，都显示滚动条
e.no-display 当内容溢出容器时不显示元素
f.no-content 当内容溢出容器时不显示内容
2.resize
a.none 用户不能拖动元素修改尺寸大小
b.both 用户可以拖动元素，同时修改元素的宽度和高度
c.horizontal 用户可以拖动元素，但只能改动宽度
d.vertical 用户可以拖动元素，但只能改动高度
e.inherit 继承父元素的resize属性值
3.outline
a.outline 颜色、样式、宽度、偏移值
4.outline与border线的对比
a.border属于盒模型的一部分，outline的轮廓线不会破坏网页布局
b.outline创建的外轮廓线在元素各边都一样
c.border创建的元素可以单边设置，outline创建的外轮廓线是闭合的
d.border仅可以设置元素的边框，只能向外扩展,outline可以向元素内部创建封闭的轮廓
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title&g
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
