域名注册

• 中文域名
• 英文域名
• 通用网址
• 域名解析
• 域名转入\转出

虚拟主机

• 主机购买
• 管理主机
• FTP上传
• 数据库管理
• 主机续费升级

网站建设

• 建站流程介绍
• 网站设计
• 网站改版
• 网站维护
• 网站推广

企业邮局

• 邮箱使用
• 管理邮箱
• 邮箱续费升级
• 全球邮局

网站优化

• seo优化
• seo技巧
• 收索引擎优化
• 关键词优化

网站备案

• 备案流程指南
• 修改备案
• 备案资料下载
• 备案小技巧

服务器租用

• 服务器租用
• 服务器托管

其它服务

• 400电话
• 在线客服
• 财务常见问题
• 会员常见问题

• 您现在的位置： 创新互联 >> 网站建设 >> 网站建设常见问题 >> 网站简介css3新功能

网站简介css3新功能

• 作者：谭小姐 文章来源：网站制作设计部 点击数：612 更新时间：2011-11-12
• 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
       在向用户或老板推广新技术的同时也要关 注他们的目标与可行性，不能为了技术而技术！
• 上一篇文章：XML标记之非空标记
  下一篇文章：css中的table-layoutfixed