css3 的新属性】的更多相关文章

css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!我们收集整理了一些css3.0新属性效果在ie下的解决方案! .box_round {-moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+,…
一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h}:可以全部省略标签的元素 {html,head,body}   >>>尽量不用!! 具有boolean值的属性:属性名=属性值 >>> 可以只写属性名 属性值的引号可省略:具有多个属性值的不能省 3.HTML新增结构标签(变形的…
阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,transition,transform这三个属性,今天就总结一下首先是:transform:和css3一些基本属性,例如:box-shadow.border-radius.background-position等等的这些属性是一个类型的,他可以做2D.3D,旋转.放大.缩小等的一些变化动画类: anima…
css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%--100%: l-->亮度(0%--100%): a-->透明度(0 表示完全透明,1表示完全不透明) 2==>透明度 opacity一个元素的 opacity属性会完全的应用在这个元素的本身和它的子孙上, opacity的值在0--1:0表示完全的透明(看不见) 兼容所有的浏览 img{f…
1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow_test{ box-shadow:1px 1px 20px #888888; -moz-box-shadow: 1px 1px 20px #888888; } 前两个数值是阴影距离容器的偏移量,第三个数值是阴影的模糊程度,最后一个颜色数值是阴影的颜色 3.背景图片 .bg_test{ backgr…
1,动画,animate------>//动画-名称-动画的时间间隔-以什么方式播放-循环 .right{ animate:dropdown 4px 5px #000; // x的偏移值 y的偏移值 x的半径 y的半径 偏移的颜色 7. box-sizing:content-box; //标准模型 border-box: ie怪模型…
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载的资源是有限的,例如IE7是2个,IE8是6个,chrome是6个,火狐是8个.如果网页上面有很多张零碎的小图片,导致请求的次数太多,等待加载状态中的资源会很多,明显影响性能.因此,一个改进的办法是使用sprites图,将多张小图放在一张大图,然后限定展示区域的大小,同时改变图片的显示位置backg…
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移量) stroke(阴影的线条宽度) color(阴影颜色); 2效果演示: 1)text-shadow: 0 0 10px red:字体周围更亮,感觉像发亮的字体,效果不太明显 2)color: #000;text-shadow: 0 1px 1px #fff;用阴影来突出字体颜色,有刺青的感觉…
这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } border-shadow 用于向方框添加阴影 div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #8…
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中会发现这些css.box-sizing究竟有什么用还得重头说起... 我们一般计算一个块状元素的宽度的时候会将左右padding,左右border宽度,margin 都算进去,如下图所示(浏览器默认计算方式),宽度不是100px,而是160px: style="width:100px;padding…