css3的新属性

1.css的标准阴影

li:nth-child(1) shadow{

box-shadow  :2px           2px          5px      green;

------------------------     距离左边  距离顶边   模糊度  阴影颜色----------

-2px          -2px       5px        10px      green;

---------------------------距离右边   距离底边    模糊度     阴影扩展值四条边都会增加-------------

}

内阴影:

li:nth-child(2) shadow{

box-shadow:inset 2px 2px 5px green;

}

2.文本阴影及一些文本样式;

p{

text-shadow:2px                   2px             6px        black;

距离左边的偏移  距离右边偏移  阴影模糊度  阴影颜色;

word-break:break-all;整体打 断;

word-wrap:break-word;文字打断;

white-space:pre;-------空白换行,会被保留;

pre-line;------------------换个行被保留,但是行内空格不保留;

pre-wrap-----------------空白换行都会被保留,与pre相似;

no wrap------------- -----单行文本显示,所有文本都在一行显示,空格与换行都                     不会保留

颜色渐变:

线性-渐变

background-image:linear-gradient(red,green,blue);

background-image:linear-gradient(0deg,red,orange);

----水平----

--------------90deg  垂直的     45deg/135deg倾斜的-------------

background-image:linear-gradient(to right,yellow)

过渡属性:    .one{

transition-property:width,height;--------------要过渡的属性取值;

transition-duration:1s

transiton:all 1s;

}

.one {

transition-delay:1s;-------推迟一秒再过渡;

transution:width 1s------给宽设置的宽度一秒过渡;

opacity:0----------透明度0-1;

}

.one{

transition-timing-function:linear;---------------线性效果,匀速;

ease;---------------淡入浅出;

ease-in;-----------------淡入

ease-out ---------------淡出;

ease-in-out;---------------淡入淡出;

时间: 2024-10-21 20:00:09

css3的新属性的相关文章

css3的新属性background-clip认识

css3新增的background-clip属性主要是对背景图片进行裁切的作用:background-clip:border-box || padding-box || context-box 分别对边框,内边距,内容区域进行裁切,把多余的部分给裁切掉,有兼容性问题. 拿w3cplus的文章代码过来: /*Firefox3.6-*/ -moz-background-clip: border || padding; /*Webkit*/ -webkit-background-clip: borde

小K的H5之旅-HTML5与CSS3部分新属性浅见

一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h}:可以全部省略标签的元素 {html,head,body}   >>>尽量不用!! 具有boolean值的属性:属性名=属性值 >>> 可以只写属性名 属性值的引号可省略:具有多个属性值的不能省 3.HTML新增结构标签(变形的

css3 的新属性

1,动画,animate------>//动画-名称-动画的时间间隔-以什么方式播放-循环 .right{ animate:dropdown 8s linear infinite } @keyframes dropdown{ 0%{margin-top:10px;} 10%{margin-top:20px;} 100%{margin-top:50px;} } 2. transition: width 2s linear;//过度的效果 线性-宽度2s-发生变化 3.transform:rotat

CSS3新属性注释及实例

这里把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 #888888; /* 老的

css3 的box-sizing属性理解

* { -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

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

两点补充——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系统最常用的字体格式,其最大

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa