css3 常用的属性

mac2022-07-05 8

1、伪类选择符 Pseudo-Classes Selectors

Selectors选择符CSS Version版本Description简介E:linkCSS1设置超链接a在未被访问前的样式。E:visitedCSS1设置超链接a在其链接地址已被访问过时的样式。E:hoverCSS1/2设置元素在其鼠标悬停时的样式。E:activeCSS1/2设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。E:focusCSS1/2设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。E:lang(fr)CSS2匹配使用特殊语言的E元素。E:not(s)CSS3匹配不含有s选择符的元素E。E:rootCSS3匹配E元素在文档的根元素。E:first-childCSS2匹配父元素的第一个子元素E。E:last-childCSS3匹配父元素的最后一个子元素E。E:only-childCSS3匹配父元素仅有的一个子元素E。E:nth-child(n)CSS3匹配父元素的第n个子元素E。E:nth-last-child(n)CSS3匹配父元素的倒数第n个子元素E。E:first-of-typeCSS3匹配同类型中的第一个同级兄弟元素E。E:last-of-typeCSS3匹配同类型中的最后一个同级兄弟元素E。E:only-of-typeCSS3匹配同类型中的唯一的一个同级兄弟元素E。E:nth-of-type(n)CSS3匹配同类型中的第n个同级兄弟元素E。E:nth-last-of-type(n)CSS3匹配同类型中的倒数第n个同级兄弟元素E。E:emptyCSS3匹配没有任何子元素（包括text节点）的元素E。E:checkedCSS3匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)E:enabledCSS3匹配用户界面上处于可用状态的元素E。E:disabledCSS3匹配用户界面上处于禁用状态的元素E。E:targetCSS3匹配相关URL指向的E元素。@page:firstCSS2设置页面容器第一页使用的样式。仅用于@page规则@page:leftCSS2设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则@page:rightCSS2设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

2、resize

语法：

resize：none | both | horizontal | vertical

默认值：none

适用于：所有设置了overflow除了visible之外的元素

继承性：无

取值：

none：不允许用户调整元素大小。 both：用户可以调节元素的宽度和高度。 horizontal：用户可以调节元素的宽度 vertical：用户可以调节元素的高度。

说明：

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。对应的脚本特性为resize。

案例：

3、outline-offset

语法：

outline-offset：<length>

默认值：0

适用于：所有元素

继承性：无

取值：

<length>：用长度值来定义轮廓偏移。允许负值。 0是以border边界作为参考点的，正值从border边界往外延，负值从border边界往里缩。

说明：

设置或检索对象外的线条轮廓偏移容器的值。参阅outline属性。对应的脚本特性为outlineOffset。

案例：

4、transform（变换）

语法：

transform：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

默认值：none

适用于：所有块级元素及某些内联元素

继承性：无

取值：

none：无转换 matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 translateX(<length>)：指定对象X轴（水平方向）的平移 translateY(<length>)：指定对象Y轴（垂直方向）的平移 rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义 scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 scaleX(<number>)：指定对象X轴的（水平方向）缩放 scaleY(<number>)：指定对象Y轴的（垂直方向）缩放 skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 skewX(<angle>)：指定对象X轴的（水平方向）扭曲 skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。对应的脚本特性为transform。

* transform-origin

语法：

默认值：50% 50%，效果等同于center center

适用于：所有块级元素及某些内联元素

继承性：无

取值：

<percentage>：用百分比指定坐标值。可以为负值。 <length>：用长度值指定坐标值。可以为负值。 left：指定原点的横坐标为left center①：指定原点的横坐标为center right：指定原点的横坐标为right top：指定原点的纵坐标为top center②：指定原点的纵坐标为center bottom：指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。该属性提供2个参数值。如果提供两个，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。对应的脚本特性为transformOrigin。

5、transition

语法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

[ transition-property ]：检索或设置对象中的参与过渡的属性 [ transition-duration ]：检索或设置对象过渡的持续时间 [ transition-timing-function ]：检索或设置对象中过渡的动画类型 [ transition-delay ]：检索或设置对象延迟过渡的时间

说明：

复合属性。检索或设置对象变换时的过渡。可以为同一元素的多个属性定义过渡效果。示例：

缩写方式：

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式：

transition-property:border-color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s; 如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：

拆分方式：

transition-property:border-color, background-color, color; transition-duration:.5s; transition-timing-function:ease-in; transition-delay:.1s; 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

缩写方式：

transition:all .5s ease-in .1s;

拆分方式：

transition-property:all; transition-duration:.5s; transition-timing-function:ease-in; transition-delay:.1s; 对应的脚本特性为transition。

6、动画 Animation

Properties属性CSS Version版本Inherit From Parent继承性Description简介animationCSS3无复合属性。检索或设置对象所应用的动画特效animation-nameCSS3无检索或设置对象所应用的动画名称animation-durationCSS3无检索或设置对象动画的持续时间animation-timing-functionCSS3无检索或设置对象动画的过渡类型animation-delayCSS3无检索或设置对象动画延迟的时间animation-iteration-countCSS3无检索或设置对象动画的循环次数animation-directionCSS3无检索或设置对象动画在循环中是否反向运动animation-play-stateCSS3无检索或设置对象动画的状态animation-fill-modeCSS3无检索或设置对象动画时间之外的状态

7、 user-select

语法：

user-select：none | text | all | element

默认值：text

适用于：除替换元素外的所有元素

继承性：无

取值：

none：文本不能被选择 text：可以选择文本 all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element：可以选择文本，但选择范围受元素边界的约束

说明：

设置或检索是否允许用户选中文本。 IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；对应的脚本特性为userSelect。

案例：<style>.testSelect1{padding:10px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;background:#eee;}.testSelect2{padding:10px;-webkit-user-select:none;-moz-user-select:text;-o-user-select:none;user-select:none;background:#eee;}.testSelect3{padding:10px;-webkit-user-select:none;-moz-user-select:all;-o-user-select:none;user-select:none;background:#eee;}</style>

　　　<div class="testSelect1">选择我试试，你会发现怎么也选择不到我，哇哈哈</div> <div class="testSelect2" onselectstart="return false;" unselectable="on">我是正常的</div> <div class="testSelect3" onselectstart="return false;" unselectable="on">选择我试试，你会发现我们是一个整体，哇哈哈</di

8、新的边框属性

属性描述CSSborder-image设置所有 border-image-* 属性的简写属性。3border-radius设置所有四个 border-*-radius 属性的简写属性。3box-shadow向方框添加一个或多个阴影。3

转载于:https://www.cnblogs.com/Better-Me/p/4242031.html

最新回复(0)