CSS3 精华一页纸

CSS3 对应CSS新增特性

盒子模型


盒子模型的 边框

1、可以有圆角 border-radis

2、可以有图片 border-image / 当然还有图片填充效果

盒子模型的 阴影

1、box-shadow 任何元素都可以使用阴影

通过阴影,可以实现立体卡片式 的效果; 用作做文字便签/图像的便签;比如 京东和途牛点评的卡片贴

2、text-shadow 文本也有了阴影效果

盒子模型的 width/height

1、使用 box-sizing 可以指明 width/height 是指的哪一部分

背景


背景图片的特效

1、可以支持同时多个图片做为背景叠加,分别做平铺处理

2、可以控制背景图片的大小,占满整个元素(在2中,只能平铺等处理)

3、可以控制背景图片在 盒子模型中的显示 区域

增加了很多PS才有的特色功能

1、渐变效果:线性渐变 linear-gradient/radial-gradient 可以指定任意角度,是否重复,等各种渐变效果

2、图片滤镜:实现各种 饱和度/色彩/模糊 功能的用法

可以自有使用浏览器字体外的字体

@font-size

响应式布局


多媒体查询 + 响应式图像 = 响应式web页面 (PC/移动端自适应?)

1、通过 @media 多媒体查询,可以 使用PC的各种浏览器调整; 更可以通过这个适应 移动端

2、响应式图像,避免了图像的扩展溢出超过父元素的大小

补充阅读:响应式web,媒体查询

动画


2D转换 & 过渡

1、通过 2D转换 实现很多动态效果,最常用的是 translate 沿着x,y轴移动元素,比如实现的 按钮按下/弹起效果;scale ,图像从小变大,从大到小的变换。

2、通过使用 transition [属性] 时长,实现过渡效果

这两者结合可以实现,很多 组件的动画效果。

同时 2D转换 还可以结合 动画 实现类似效果

动画

1、@keyframes donghua 定义动画过渡的多个样式,可以是 from to 或者 百分比

2、在 元素样式中指定 这个动画 animation:donghua 5s;

弹性盒子布局

新增的布局好像没啥太多的使用意义?

杂项

文本换行 word-wrap;多列 column-count

总结就是

1、增加了动画效果:2D转换 过渡 动画

2、增加了显示立体感:盒子模型的阴影/圆角 背景图片等等

3、响应式web页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,610评论 0 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,263评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,977评论 4 60
  • 書:书写的方法,手拿着毛笔写东西。 聿:yù手拿毛笔写字。筆:竹子做的就是笔。律:用笔写出来的你必须走的路。津:手...
    Cherrie_Hou阅读 768评论 0 49
  • 二十出头的年纪 不像早恋可以毫无顾虑 不够成熟却也不那么幼稚 没有能力却有野心 没有骄傲的资本 怎么敢说爱谁 说散...
    她和她的猫丶阅读 262评论 0 0