CSS杂谈（2）

• opacity 属性设置元素的不透明级别。
•  

语法

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 属性的值。

 

***************************************************************************************************************

• -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;

 

• transition 用于设置四个过渡属性

 

• JavaScript 语法：	object.style.transition="width 2s"

  语法

  transition: property duration timing-function delay;

  值	描述
  transition-property	规定设置过渡效果的 CSS 属性的名称。
  transition-duration	规定完成过渡效果需要多少秒或毫秒。
  transition-timing-function	规定速度效果的速度曲线。
  transition-delay	定义过渡效果何时开始。

 

 

 

-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 属性规定元素应该生成的框的类型

 

*************************************************************************************************************

• 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)