美文网首页CSS3
CSS3用户界面实用属性

CSS3用户界面实用属性

作者: Leophen | 来源:发表于2019-04-16 11:57 被阅读0次
text-overflow(当块容器<‘overflow’>为非visible时,定义内联内容溢出其块容器是否截断)
text-overflow:clip / ellipsis;
/*overflow:hidden;和white-space:nowrap;两者缺一不可
参数说明:
- clip:当内联内容溢出块容器时,将溢出部分裁切掉
- ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...)
*/
outline(设置或检索对象外的线条轮廓,画在border外面,不占据布局空间,复合属性)
outline:<' outline-width '> || <' outline-style '> || <' outline-color '>;
/*overflow:hidden;和white-space:nowrap;两者缺一不可
参数说明:
- outline-width:<length> / thin / medium / thick
- outline-color:<color> | invert(使用背景色的反色,仅在IE和Opera有效)
- outline-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset
*/
outline-offset(设置或检索对象外的线条轮廓偏移容器的值)
outline-offset:<length>;
/*参数说明:
- <length>:用长度值来定义轮廓偏移,允许负值
*/
cursor(设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状)
cursor:XX;
/*参数说明:
- url  需使用的自定义光标的 URL。
- default  默认光标(通常是一个箭头)
- auto 默认。浏览器设置的光标。
- crosshair    光标呈现为十字线。
- pointer  光标呈现为指示链接的指针(一只手)
- move 此光标指示某对象可被移动。
- e-resize 此光标指示矩形框的边缘可被向右(东)移动。
- ne-resize    此光标指示矩形框的边缘可被向上及向右移动(北/东)。
- nw-resize    此光标指示矩形框的边缘可被向上及向左移动(北/西)。
- n-resize 此光标指示矩形框的边缘可被向上(北)移动。
- se-resize    此光标指示矩形框的边缘可被向下及向右移动(南/东)。
- sw-resize    此光标指示矩形框的边缘可被向下及向左移动(南/西)。
- s-resize 此光标指示矩形框的边缘可被向下移动(南)。
- w-resize 此光标指示矩形框的边缘可被向左移动(西)。
- text 此光标指示文本。
- wait 此光标指示程序正忙(通常是一只表或沙漏)。
- help 此光标指示可用的帮助(通常是一个问号或一个气球)
*/
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;
/*要使此属性生效,需要设置元素的overflow 属性,值可以是 auto、hidden 或 scroll
参数说明:
- none:不允许用户调整元素大小
- both:用户可以调节元素的宽度和高度
- horizontal:用户可以调节元素的宽度
- vertical:用户可以调节元素的高度
*/
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上
*/

相关文章

  • CSS3用户界面实用属性

    text-overflow(当块容器<‘overflow’>为非visible时,定义内联内容溢出其块容器是否截断...

  • CSS3 用户界面

    CSS3 用户界面在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 用户界面属性: ...

  • CSS3 用户界面

    在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。 新的用户界面属性 下面的表格列出了所有的转...

  • CSS3 用户界面

    CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。在本章中,您将了...

  • CSS3用户界面

    appearance 是否按照本地默认样式,基本上浏览器都不支持 text-overflow outline na...

  • CSS3用户界面

    appearance属性 概念:设置或检索外观按照本地默认样式 语法:appearance: none | but...

  • 随内容自动伸缩的背景

    CSS3给我们带来一个非常实用的新属性:border-image,利用这个属性我们可以做出随着内容的增减自动伸缩的...

  • 用户界面与其它重要属性

    自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许...

  • 第12章 用户界面与其它重要属性

    自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许...

  • 自由缩放属性resize

    自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许...

网友评论

    本文标题:CSS3用户界面实用属性

    本文链接:https://www.haomeiwen.com/subject/eovvwqtx.html