zoukankan      html  css  js  c++  java

  • css3 常用的属性

    1、伪类选择符 Pseudo-Classes Selectors

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

    2、resize

    语法：

    resize：none | both | horizontal | vertical

    默认值：none

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

    继承性：无

    取值：

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

    说明：

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

    案例：

    <style>
    .test{overflow:auto;200px;height:100px;resize:both;background:#eee;}
    </style>

    <div class="test">
        <ul>
            <li>新闻列表</li>
            <li>新闻列表</li>
            <li>新闻列表</li>
        </ul>
    </div>

    3、outline-offset

    语法：

    outline-offset：<length>

    默认值：0

    适用于：所有元素

    继承性：无

    取值：

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

    说明：

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

    案例：

    <style>
    .test{220px;padding:10px;outline:1px dashed #333;outline-offset:4px;border:3px solid #333;}
    </style>
    <div class="test">注意虚线轮廓偏移容器的距离<br />outline-offset:4px;</div>

    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

    语法：

    transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

    默认值：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
    简介
    animation CSS3 无 复合属性。检索或设置对象所应用的动画特效
    animation-name CSS3 无 检索或设置对象所应用的动画名称
    animation-duration CSS3 无 检索或设置对象动画的持续时间
    animation-timing-function CSS3 无 检索或设置对象动画的过渡类型
    animation-delay CSS3 无 检索或设置对象动画延迟的时间
    animation-iteration-count CSS3 无 检索或设置对象动画的循环次数
    animation-direction CSS3 无 检索或设置对象动画在循环中是否反向运动
    animation-play-state CSS3 无 检索或设置对象动画的状态
    animation-fill-mode CSS3 无 检索或设置对象动画时间之外的状态
    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、新的边框属性

    属性描述CSS
    border-image 设置所有 border-image-* 属性的简写属性。 3
    border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
    box-shadow 向方框添加一个或多个阴影。 3
  • 相关阅读:
    docker相关资源监控采集方法整理
    三节课MINI计划第四周
    三节课MINI计划第五周
    三节课MINI计划第四周
    三节课MINI计划第三周
    三节课MINI计划第二周
    Bilibili用户需求分析报告
    三节课MINI计划第一周
    《产品思维30讲 》学习笔记
    PHP-FPM未授权访问漏洞
  • 原文地址：https://www.cnblogs.com/Better-Me/p/4242031.html
Copyright © 2011-2022 走看看