CSS3新添加的属性

1.圆角设置
  border-radius:15px 50px 30px 5px;

  /*四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下    角。

  三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

  两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

  一个值: 四个圆角值相同

*/

2.阴影设置
   box-shadow:100px 100px 80px #888888;/*四个参数依次:距左距离 距上距离 模糊程度(数值越大越模糊) 颜色   (text-shadow为文本阴影)*/
3.多背景设置
   background-image:url(xxx.gif),url(xxxxx.gif);/*支持多背景混合插入*/
4.渐变设置(IE9以上)
   过度渐变:
   background: -webkit-linear-gradient(red, blue, green);
   background: -o-linear-gradient(red, blue, green);
   background: -moz-linear-gradient(red, blue, green);
   background: linear-gradient(red, blue, green); /* 标准的语法(必须放在最后) 参数个数不限可多节点变色   默认为从上到下渐变*/ 

   background: -webkit-linear-gradient(left, red, blue);
   background: -o-linear-gradient(left,red, blue);
   background: -moz-linear-gradient(left,red, blue);
   background: linear-gradient(left,red, blue); /*left也可以写成(10deg以角度方式渐变) 从左到右渐变*/

   background: -webkit-linear-gradient(left top, red, blue);
   background: -o-linear-gradient(left top,red, blue);
   background: -moz-linear-gradient(left top,red, blue);
   background: linear-gradient(left top,red, blue); /*从左上到右下渐变*/

   径向渐变:
   background: -webkit-radial-gradient(red, green, blue,yellow);
   background: -o-radial-gradient(red, green, blue,yellow);
   background: -moz-radial-gradient(red, green, blue,yellow);
   background: radial-gradient(red, green, blue,yellow);

  

时间: 2024-10-17 17:00:44

CSS3新添加的属性的相关文章

css3新添加哪些新特性?

css3新特性: 1.圆角border-radius:10px:如果是圆形,value写成50%即可. 2.盒模型添加的阴影:box-shadow:5px 5px 10px;分别是 横向阴影长度,竖向阴影长度和阴影自身的长度   当然后面可以继续添加inset  ,表示内侧阴影. 3.对文字添加阴影:text-shadow,同上. 4.线行渐变,gradient 5.旋转角度:transform,比如说,transform:rotate(9deg)  scale(0.85 0.9) 6.tran

CSS3样式中新添加的属性

border-radius:允许向元素添加圆角 <style type="text/css"> #r1{ border-radius:25px; background:blue; padding:20px; width:200px; height:150px; } #r2{ border-radius:25px; border:2px solid green; padding:20px; width:200px; height:150px; } #r3{ border-ra

css3 新添加的选择器

E~F:选择E元素后面的所有兄弟元素F. E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素. E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素. E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素. E:not():匹配不含有s选择符的元素E. E:root:匹配E元素在文档. E:only-child匹配父元素仅有的一个子元素E.(要使该属性

CSS3新添加的选择器

[cusid*= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值包含value字符的即可使用如下样式. [cusid^= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值以value字符开头的即可使用如下样式. [cusid$= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值以value字符结尾的即可使用如下样式.

自定义视图一:扩展现有的视图,添加新的XML属性

这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! 简介 这个系列详细的介绍了如何穿件Android自定义视图.主要涉及的内容有如何绘制内容,layout和measure的原理,如何继承实现view group以及如何给其子视图添加动画.第一篇主要讲述如何扩展和使用现有的视图,以及如何添加特有的XML属性. 特定的任务使用特定的视图 Android提供的view都是比较通用的,哪里都可以用.但是在开发应用的过程中需要对这些通用的view加以修改.很多时候这些代码都添加到了Activ

css3弹性盒模型属性整理

display:box;是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 设置父容器样式display:box;  .father{ margin: 0 auto; width: 1000px; height: 200px; border:1px solid red; /* 设置父元素的显示方式 */ display: -webkit-box; /* Chrome ,Opera, Safari *

总结CSS3新特性(Transform篇)

概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg #demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/ } 缩放(scale): scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

CSS3新属性:在网站中使用访客电脑里没有安装的字体

CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的!不过不是访客主动下载的,而是网站开发者帮访客下载安装的,具体怎么实现的,我们还要从字体文件的格式说起.字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG.  TrueType Windows和Mac系统最常用的字体格式,其最大