Css3【DOC精选】.docx

Css图片透明代码：Img{Opacity:0.4;Filter:alpha(opacity=40);}显示效果：轮廓边框属性：Outline：p{ outline:#00FF00 dotted thick;}outline（轮廓颜色，轮廓样式、轮廓宽度）轮廓颜色的可能值：轮廓样式：轮廓宽度的可能值：表格Table属性Border-collapse属性：Border-spacing属性：border-spacing:10px 50px;设置相邻单元格边框的距离Caption-side设置表格标题位置： caption-side:bottom;Empty-cells是都显示空的单元格：empty-cells:hide;Table-layout：用来显示表格单元格、行、列： table-layout:fixed;列表属性：list-style-type属性list-style-imagelist-style-positionText-indent首行缩进CSS伪类a:link {color:#FF0000;}/* 未被访问的链接 */a:visited {color:#00FF00;}/* 已被访问的链接 */a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */a:active {color:#0000FF;}/* 正在被点击的链接 */--：focus焦点元素:first-child向元素的第一个子元素添加样式。:lang向带有指定 lang 属性的元素添加样式。伪元素:first-line 伪元素---------------向文本首行设置特殊样式如：p:first-line:first-letter 伪元素first-letter 伪元素用于向文本的首字母设置特殊样式：-：before伪元素：可以在元素的内容前面插入新内容如代码：h1:before{content:url(logo.gif);}-：after伪元素：可以在元素之后插入新内容（跟before一个类似）Css3Dw教学视频地址：/学习网站：/manual/css3_0/attribute_selector_19.shtml边框代码Css3边框图片相关属性：border-image：border-top-image , border-right-image , border-bottom-image , border-left-image　border-corner-image：border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-imageCss3的边框代码border: 5px solid #cccccc;-webkit-border-image: url(/images/border-image.png) 5 repeat;-moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat; 上面代码定义边框的宽度为5px；（-wenkit，-moz为浏览器内核）图二的效果为使用图一的黄色部分，可以修改图片后面数值来获取需要的区域；代码如下：border-image: url(border.png) 27 27 27 27 round round; -webkit-border-image: url(border.png) 27 27 27 27 round round; -moz-border-image: url(border.png) 27 27 27 27 round round;图三为将黄色区域伸缩，伸缩代码为：border-image: url(border.png) 27 27 27 27 stretch stretch; -webkit-border-image: url(border.png) 27 27 27 27 stretch stretch; -moz-border-image: url(border.png) 27 27 27 27 stretch stretch;块阴影代码：box-shadow: h-shadow（水平）v-shadow（垂直）blur（模糊距离）spread（阴影尺寸）color（颜色） inset（将外部阴影改为内部阴影）;内阴影： 外阴影：四、文字阴影代码：text-shadow:Apx Bpx Cpx #xxxxxx;如：text-shadow: 2