专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

CSS杂谈(二)

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
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-shadowv-shadowblurspreadcolorinset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。W3C
值描述测试h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。inset可选。将外部阴影 (outset) 改为内部阴影。-moz-box-shadow: 0 -1px rgba(255,255,255,.3);-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);box-shadow: 0 -1px 0 rgba(255,255,255,.3);-moz-border-radius: 3px;-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定义圆角的形状。%以百分比定义圆角的形状。

例子 1border-radius:2em;等价于:border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;例子 2border-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:propertydurationtiming-functiondelay;
值描述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,如果指定成Nothingnormal设置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)
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: