HTML5出现也有一段时间了,我们对其新功能也了解了下,今天上海做网站公司就先对CSS3技术概况做一个简单的介绍,后续文章我们会进行对html5的介绍敬请期待。 
css3的更新主要包括了选择器、布局、样式、动画和浏览器等方面的变化,请看下面详文
CSS3-选择器
 属性选择器 – a[href$=`.pdf`], a[href^=`mailto`], a[class*=‘item’]
 兄弟选择器 – Div~img
 伪类选择器 – :nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-oftype(odd), :nth-of-type(even)
CSS3-样式
 圆角 – border-radius: 3px – -moz-border-radius-topleft – -webkit-border-top-left-radius
 阴影 – box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) – text-shadow: 2px 2px #444, 3px 3px #555   自定义字体 – @font-face{ font-family: Adam, src:url(adam.ttf); } p{font-family:Adam, serif;}   文本换行 – word-wrap: normal|break-word
CSS3-样式
 边框背景 – border-image: url(border.png) 27 27 27 27 round round;
 渐变 – background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat;
 背景 – background-size: 100px 50px; – background-origin: content-box|border-box|paddingbox; – background-clip: border-box|padding-box
CSS3-样式
 透明 – opacity: 0.5; ? RGBA – color: rgba(0, 255, 0, 0.5); ? HSL/A – color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5)
 调整元素尺寸 – resize: both|horizontal|vertical
CSS3-布局
 盒模型 – box-sizing: content-box|border-box;
 网格模型 – column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black;
 CSS Table Display – #content{display: table;} #main{display: table-cell; width:620px; padding-right: 22px;} #side{display: table-cell; width: 300px;}
 Outline – outline-offset
CSS3-动画
 变换 – transform: rotate(30deg); – transform: scale(0.5, 2.0); – transform: skew(-30deg); – transform: translate(30px, 0);
 过渡 – transition: all 1s ease-out ;
 动画 – animation: greenPulse infinite ease-in-out 3s;
CSS3-其它
 媒体查询 – .entry{color: red;} @media all and {min-width: 100em}{ .entry{color: black;} }
 语音支持 – voice-volume, voice-balance, voice-family
浏览器前缀
 Firefox: -moz-box-shadow
 Safari: -webkit-box-shadow
 Opera: -o-box-shadow 
 IE: -ms-box-shadow
CSS3应用原则
 优雅降级
 对于不支持CSS3的浏览器可以使用 Javascript来实现
– 如ie7.js, ie8.js对CSS选择符的优化 – 如对于不支持:hover的ie6使用JS
 在向用户或老板推广新技术的同时也要关 注他们的目标与可行性,不能为了技术而技术!

公司地址Address

  • 上海万脑网络科技有限公司

  • 上海市中山北路198号申航大厦
    (闸北国税局)10楼1016-1018室



联系我们Contact us

  • 电话:86 - 021 - 31268077(转各部门)

  • 传真:86 - 021 - 31268077 - 808

  • 24小时直线:13370013230

QQ咨询QQ consulting

微站咨询

点击这里给我发消息 QQ:496555414
征信网 360检测 工商亮照 沪公网安备

沪公网安备 31010802001027号