笔记:CSS3用户界面

appearance

解释:检索或设置外观按照本地默认样式
语法:appearance:none / button / button-bevel…;
appearance有110个属性值
兼容性:所有主流浏览器都不支持appearance属性
Firefox2+(-moz-)、Chrome4+(-webkit-)、Safari6+(-webkit-)、Opera15+(-webkit-)、Android Browser2.1+(-webkit-)

text-overflow

解释:当块容器< overflow >为非 visible 时,定义内联内容溢出其块容器是否截断
语法:text-overflow:clip / ellipsis;
clip:当内联内容溢出块容器时,将溢出部分裁切掉
ellipsis:当内联内容溢出块容器时,将溢出部分替换为(…)

outline

解释:复合属性,检索或设置对象外的线条轮廓
画在border外面,不占据布局空间,不影响元素尺寸,outlines可能是非矩形
语法:outline:outline-width || outline-style || outline-color;
参数说明:指定元素轮廓边框的宽度、样式和颜色

1.outline-width
解释:检索或设置对象外的线条轮廓的宽度
语法:outline-width:length / thin / medium / thick
length:用长度值来定义轮廓的厚度,不允许负值
medium:定义默认宽度的轮廓
thin:定义比默认宽度细的轮廓
thick:定义比默认宽度粗的轮廓

2.outline-color
解释:设置或检索对象外的线条轮廓的颜色
语法:outline-color:color / invert;
color:指定颜色
invert:使用背景色的反色(仅IE和Opera有效)

3.outline-style
解释:设置或检索对象外的线条轮廓的样式
语法:outline-style:none / dotted / dashed / solid / double / groove / ridge / inset / outset;
none:无轮廓,与任何指定的 outline-width 值无关
dotted:点状轮廓
dashed:虚线轮廓
solid:实线轮廓
double:双线轮廓,两条单线与其间隔的和等于指定的 outline-width 值
groove:3D凹槽轮廓
ridge:3D凸槽轮廓
inset:3D凹边轮廓
outset:3D凸边轮廓

outline-offset
解释:设置或检索对象外的线条轮廓偏移容器的值
语法:outline-offset:length;
length:用长度值来定义轮廓偏移量,允许负值

nav-index

解释:设置或检索对象的导航顺序
语法:nav-index:auto / number;
auto:元素的导航焦点顺序由客户端自动分配
number:用浮点数来定义元素的导航焦点顺序,若某元素的该值等于1,则意味着该元素最先被导航,当若干个元素的nav-index值相同时,则按照文档的先后顺序进行导航
注:浏览器都不兼容,有被W3C移除可能

nav-up

解释:检索或设置对象的导航方向
语法:nav-up:auto / id [current / root / target-name];
auto:默认顺序
id:被导航元素的ID
target-name:框架目标页面间的元素焦点导航
注:有被W3C移除可能,right、down、left 都一样

cursor

解释:检索或设置在对象上移动的鼠标指针采用何种系统预定义的光标形状
语法:很多

zoom

解释:设置或检索对象的缩放比例
语法:zoom:normal / number / percentage;
normal:使用对象的实际尺寸
number:用浮点数来定义缩放比例,不允许负值
percentage:用百分比来定义缩放比例,不允许负值

box-sizing

解释:设置或检索对象的盒模型组成模式
语法:box-sizing:content-box / border-box;
content-box:padding 和 border 不被包含在定义的 width 和 height 之内
border-box:padding 和 border 被包含在定义的 width 和 height 之内

resize

解释:设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小
语法:resize:none / both / horizontal / vertical;
none:不允许用户调整元素大小
both:用户可以调节元素的宽度和高度
horizontal:用户可以调节元素的宽度
vertical:用户可以调节元素的高度
注:resize只能把它拉大,不能拉小

ime-mode

解释:设置或检索是否允许用户激活输入中文、韩文、日文等的输入法(IME)状态
语法:ime-mode:auto / normal / active / inactive / disabled
auto:不影响IME(input method editor)的状态
normal:正常的IME状态
active:指定所有使用IME输入的字符,即激活本地语言输入法,用户仍可以撤销激活IME
inactive:指定所有不使用IME输入的字符,即激活非本地语言,用户仍可以撤销激活IME
disabled:完全禁用IME,对于有焦点的控件(如输入框),用户不可以激活IME

user-select

解释:设置或检索是否允许用户选中文本
语法:user-select:none / text / all / element;
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择,如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素
element:可以选择文本,但选择范围受元素边界的约束

pointer-events

解释:设置或检索在何时成为属性事件的target
语法:pointer-events:auto / none / visiblepainted / visiblefill / visiblestroke / visible / painted / fill / stroke / all;
auto:与pointer-events未指定时的表现效果相同,在svg内容上与visiblepainted值相同
none:元素永远不会成为鼠标事件的target
其它值只能应用在svg上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值