zoukankan      html  css  js  c++  java
  • CSS杂谈(2)

    • opacity 属性设置元素的不透明级别。CSS杂谈(2)
    •  

    语法

    opacity: value|inherit;
    描述 
    value 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。  
    inherit 应该从父元素继承 opacity 属性的值。
    div
    {
    background-color:red;
    opacity:0.5;
    filter:Alpha(opacity=50);
    }
     
    **************************************************************************************************************
    • visibility 属性规定元素是否可见
    描述
    visible 默认值。元素是可见的。
    hidden 元素是不可见的。
    collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
    inherit 规定应该从父元素继承 visibility 属性的值。     
     
    h.invisible {visibility:hidden}
     
    *******************************************************************************************************************
     
    • position 属性规定元素的定位类型
    描述
    absolute

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    fixed

    生成绝对定位的元素,相对于浏览器窗口进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    relative

    生成相对定位的元素,相对于其正常位置进行定位。

    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit 规定应该从父元素继承 position 属性的值。 
     
     
    *************************************************************************************************************
     
    • z-index 属性设置元素的堆叠顺序
    注释:元素可拥有负的 z-index 属性值。
    注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)
     
    描述
    auto 默认。堆叠顺序与父元素相等。
    number 设置元素的堆叠顺序。
    inherit 规定应该从父元素继承 z-index 属性的值。
     

    CSS杂谈(2)CSS杂谈(2)
    ***************************************************************************************************************
    • -moz-linear-gradient 让网站背景渐变
    在CSS中
    background: -moz-linear-gradient 网站背景渐变的属性,火狐3.6以上版本和google浏览器支持这个属性。
    background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ 
     
    background: -webkit- gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color- stop(100%,#d2dded)); 适合 Chrome,Safari4+ 
     
    background: -webkit-linear-gradient(top,  #bccfe3 0%,#d2dded 100%);  适合Chrome10+,Safari5.1+
     
    background: -o-linear-gradient(top,  #bccfe3 0%,#d2dded 100%);  适合Opera 11.10+
     
    background: -ms-linear-gradient(top,  #bccfe3 0%,#d2dded 100%); 适合IE10+ 
     
    background: linear-gradient(top,  #bccfe3 0%,#d2dded 100%);     适合W3C
     
     
    **************************************************************************************************************
    • box-shadow 属性向框添加一个或多个阴影
    JavaScript 语法: object.style.boxShadow="10px 10px 5px #888888"

    语法

    box-shadow: h-shadow v-shadow blur spread color inset;
     
    注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。W3C

    描述测试
    h-shadow 必需。水平阴影的位置。允许负值。  
    v-shadow 必需。垂直阴影的位置。允许负值。  
    blur 可选。模糊距离。  
    spread 可选。阴影的尺寸。  
    color 可选。阴影的颜色。请参阅 CSS 颜色值。  
    inset 可选。将外部阴影 (outset) 改为内部阴影。
     
     
     
    1. -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    2. -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    3. box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    4. -moz-border-radius: 3px;
    5. -webkit-border-radius: 3px;
    ****************************************************************************************************
    • border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性
    border-radius: 1-4 length|% / 1-4 length|%;
     
    注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

    描述 
    length 定义圆角的形状。  
    % 以百分比定义圆角的形状。

     
    例子 1
    border-radius:2em;
    等价于:
    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;
    例子 2
    border-radius: 2em 1em 4em / 0.5em 3em;
    等价于:
    border-top-left-radius: 2em 0.5em;
    border-top-right-radius: 1em 3em;
    border-bottom-right-radius: 4em 0.5em;
    border-bottom-left-radius: 1em 3em;
     
    CSS杂谈(2)
    • transition 用于设置四个过渡属性
     
     
    CSS杂谈(2)
     
     

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    **************************************************************************************************************
     
     
    • transition-timing-function 属性规定过渡效果的速度曲线
    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
    bezier(n,n,n,n);


    描述
    linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
    ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
    ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
    ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
    ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    #div1 {transition-timing-function: linear;}
    #div2 {transition-timing-function: ease;}
    #div3 {transition-timing-function: ease-in;}
    #div4 {transition-timing-function: ease-out;}
    #div5 {transition-timing-function: ease-in-out;}
     
    #div1 {-moz-transition-timing-function: linear;}
    #div2 {-moz-transition-timing-function: ease;}
    #div3 {-moz-transition-timing-function: ease-in;}
    #div4 {-moz-transition-timing-function: ease-out;}
    #div5 {-moz-transition-timing-function: ease-in-out;}
     
    #div1 {-webkit-transition-timing-function: linear;}
    #div2 {-webkit-transition-timing-function: ease;}
    #div3 {-webkit-transition-timing-function: ease-in;}
    #div4 {-webkit-transition-timing-function: ease-out;}
    #div5 {-webkit-transition-timing-function: ease-in-out;}
     
    #div1 {-o-transition-timing-function: linear;}
    #div2 {-o-transition-timing-function: ease;}
    #div3 {-o-transition-timing-function: ease-in;}
    #div4 {-o-transition-timing-function: ease-out;}
    #div5 {-o-transition-timing-function: ease-in-out;}
     
    ////////////////与上例相同,但通过 cubic-bezier 来规定速度曲线:
    #div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
    #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    #div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    #div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
    #div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    #div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
    #div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
     
     
    ****************************************************************************************************
    • display 属性规定元素应该生成的框的类型
    CSS杂谈(2)

     
    *************************************************************************************************************
    • white-space 属性设置如何处理元素内的空白
    描述
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的
    标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。
     
     
     
    ****************************************************************************************************************
    • content  :before 及 :after 伪元素配合使用,来插入生成内容
    说明
    none 设置Content,如果指定成Nothing
    normal 设置content,如果指定的话,正常,默认是"none"(该是nothing)
    counter 设定计数器内容
    attr(attribute) 设置Content作为选择器的属性之一。
    string 设置Content到你指定的文本
    open-quote 设置Content是开口引号
    close-quote 设置Content是闭合引号
    no-open-quote 如果指定,移除内容的开始引号
    no-close-quote 如果指定,移除内容的闭合引号
    url(url) 设置某种媒体(图像,声音,视频等内容)
    inherit 指定的content属性的值,应该从父元素继承
     
    transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
    在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。
    在CSS2中,border-color也开始接受transparent作为参数值,《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
    在CSS3中,transparent被延伸到任何一个有color值的属性上。
     
     
    定义和用法
    slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
    如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
    语法                       --------$(selector).slideToggle(speed,callback)
  • 相关阅读:
    curl 空格和转义符
    supervisor
    pandas 小笔记
    bert 进行文本相似度计算
    认股权证的会计处理
    企业所得税汇算清缴
    调整事项与非调整事项的区别
    centos 挂载windows 2003 smb
    如何获得带转义的json内容
    安装了vs2019 编译node-sass node-gyp 找不到编译器的解决方法
  • 原文地址:https://www.cnblogs.com/tk55/p/6627493.html
Copyright © 2011-2022 走看看