让IE6/IE7/IE8浏览器支持CSS3属性 一、下载您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。二、上面的是什么东西首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如Ac...
1.浏览器前缀（1）-webkit- （webkit、chrome、Safari）（2）-moz-（Firefox）（3）-ms-（Internet explorer）（4）-o-（opera）推荐在最后写上一条无前缀的声明！2.为元素创建圆角（border-radius）（1）为元素创建相同的四个圆角：-webkit-border-radius：10px；（2）为元素创建一个圆角：-webkit-border-top-left-radius：10px；//创建左上角的圆角 -moz-border-radius-topleft：10px；（...
一、字体属性<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>字体属性</title> </head> <body> <p style="font-family: 黑体;">css之字体属性</p> <p style="font-size: 15pt">css之字体属性</p> <p style="font-style: italic">css之字体属性</p> <p style="font-style: oblique">css之字体属性</p> <p style="font-weight: bold">css之字体属性</p> <p style="font-weight: bolder">css之字体属性</p> <p...
一、CSS 列表样式列表项标志 list-style-type - list-style-type 属性用于控制列表中列表项标志的样式 - 无序列表: 出现在各列表项旁边的圆点 - 有序列表: 可能是字母、数字或另外某种计数体系中的一个符号 - 无序列表取值 - none : 无标记 - disc : 实心圆，为默认值 - circle : 空心圆 - square : 实心方块 - 有序列表取值 - none : 无标记 - decimal : 无标记 ...
css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性。Transform浏览器支持情况：Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和...
这个属性的官方文档语法：示例代码：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>*{margin: 10px;}.a{float: left;height: 300px;width: 300px;border: 10px dashed rgb(128,177,211);padding: 20px;background: url(img/HBuilder.png) no-repeat top left,url(img/HBuilder.png) no-repeat top center,url(img/HBuilder.png) no-repeat top right,url(img/HBuilder.png) no-repeat center left,url...
css的盒模型包含了content（元素自身）、padding（内边距）、border（边框）及margin（外边距）。如图，浏览器控制台elements的computed可以清晰显示元素盒模型，鼠标多动动就明白了：（蓝色区域表示content元素自身，这里是整个窗口的内容）盒模型有两种：标准模式和怪异模式。在<!DOCTYPE>声明缺失时就会在ie6、ie7、ie8下触发怪异模式标准模式下：盒子总宽度/高度 = content + padding + border + margin，content的width/heigh...
<div id="section1"> 示例文本1</div><div id="subsection1-1">示例文本1-1</div><div id="subsection1-2">示例文本1-2</div><div id="section2">示例文本2</div><div id="subsection2-1">示例文本2-1</div><div id="subsection2-2">示例文本2-2</div>CSS2中使用属性选择器来设置<style type=text/css>[id = section1]{ background:yellow;}</style>CSS3中的属性选择器1.[att*=val]属性值包含用val指定的字符[id*=section]{ ...
一、动画概述动画概念 - 过渡属性只能模拟动画效果 - animation 属性可以制作类似 Flash 动画 - 通过关键帧控制动画的每一步 - 使元素从一种样式逐渐变化为另一种样式 - 实现复杂的动画效果 - 浏览器兼容性 - 最新版本支持良好 - Chrome 和 Safari 需要前缀 -webkit- - FireFox 需要前缀 -moz- - Opera 需要前缀 -o-动画示例 - 声明动画 - 创建一个已命名的动画 - 使用 @keyfram...
浏览器的内核 谷歌的内核：webkit Firefox（火狐）的内核：Gecko ie的内核：Trident opera（欧朋）的内核：presto 国内浏览器的内核：webkit 注意：css3并不是所有的浏览器都兼容针对同一样式（css3） 在不同浏览器的兼容，需要在样式的属性前加上他的内核前缀 谷歌的前缀：-webkit-transition opera(欧朋)的前缀：-o-transition 火狐（Firefox）的前缀：-moz-tra...
一：css3属性选择器：img[alt]{border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围：如下代码： img[alt="atwi_oscar"]{border:2px dashed #000; } css3的子字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下：img[alt^="filem"]{border:2px dashed #000; } (2)‘匹配包含内容‘的属性选择器El...
原文:熟悉css/css3颜色属性 颜色属性无处不在。字体要用颜色，背景可以有颜色，粒子特效更是离不开颜色。本文参考了一些资料简单总结下以备日后查阅。 css中颜色的定义方式：十六进制色RGB & RGBAHSL & HSLA颜色名十六进制色 个人最喜欢的一种颜色表达方式。 十六进制颜色是这样规定的：#RRGGBB，其中的RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。 生成随机颜...
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。今天发现这个属性很有意思。这里有一篇详细的技术博客：http://www.w3cplus.com/content/css3-transition原文：http://www.cnblogs.com/lkp-blog/p/5295562.html
浏览器支持度CSS3属性： columns：规定列的宽度和列数 默认宽度、列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1、border-radius属性(圆角边框)eg:结合不同浏览器兼容问题，使用该CSS3新属性 eg: 2、box-shadow属性（阴影） eg:结合不同浏览器兼容问题，使用该CSS3新属性 eg: 3、...
利用css3实现一个半月形的西瓜，利用queue实现吃西瓜的动画。练习例子css3:1、圆角border-radius:100%;border-top-left-radius:5px;2、变形2D旋转：transform: rotate(25deg);(正角度为顺时针，负角度为逆时针)。3D旋转：transform: rotateX(25deg);-----效果为div的高度变小，90deg时高度为0。3D旋转：transform: rotateY(25deg);-----效果为div的宽度变小（左右border同时内缩），90deg时宽度为0。缩放:transform:scale(1,0.5);或...