目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小.
- background: url(path/to/image.jpg) no-repeat;
- background-size: 100% 100%;
上面的代码使得背景图像已经占据了整个可用空间. 但是, 如果我们使用一个特殊的图片去占据 body 元素的整个空间而无论窗口有多宽, 那又怎么做?
- body, html { height: 100%; }
- body {
- background: url(path/to/image.jpg) no-repeat;
- background-size: 100% 100%;
- }
对, 就是这么做, 分别定义 background-size 的 x,y 参数. 最新版本的 Chrome 和 Safari 支持此属性, 但我们还是要用旧的方法支持旧的浏览器.
- body {
- background: url(path/to/image.jpg) no-repeat;
- -moz-background-size: 100% 100%;
- -o-background-size: 100% 100%;
- -webkit-background-size: 100% 100%;
- background-size: 100% 100%;
- }
- text-overflow
浏览器最初开发文本溢出属性可以设定两个值: clip ellipsis 此属性支持切断容器中的文本, 而且也给出了一个省略号的特性.
- .box {
- -o-text-overflow: ellipsis;
- text-overflow:ellipsis;
- overflow:hidden;
- white-space:nowrap;
- border: 1px solid black;
- width: 400px;
- padding: 20px;
- cursor: pointer;
- }
或许你会考虑当鼠标经过时显示全部的文本内容.
- box:hover {
- white-space: normal;
- color: rgba(0,0,0,1);
- background: #e3e3e3;
- border: 1px solid #666;
- }
有点奇怪, 这看起来并不像是重置 text-overflow 属性或是停用它, 使之生效, 在 on:hover 中我们可以使得 white-space 的 normal 属性. 现在正常了. 知道吗? 您还可以指定自己的字符串, 应使用省略号的位置. 这样做来修饰要显示的文本字符串.
Flexible Box Model
Flexible Box Model 将最终使我们远离类似 float 的困扰. 虽然是要给你的头部换一个新的属性, 但一旦你这么做了, 将终身受益. 做个演示, 创建简单的两列布局.
- <div id="container">
- <div id="main"> Main content here </div>
- <aside> Aside content here </aside>
- </div>
首先我们要设定一个容器, 然后指定它的宽和高, 即便是没有实质性的内容在里面.
- container
- {
- width: 960px;
- height: 500px; / just for demo /
- background: #e3e3e3;
- margin: auto;
- display: -moz-box;
- display: -webkit-box;
- display: box;
- }
接下来分别定义 #main 和 aside 的背景色
- main{background: yellow;}
- aside {background: red;}
到目前为了还没有看出什么效果来.
值得一提的是, 虽然我们设置了 display:box 模型, 它的子元素会占据整个垂直空间. 这就是它的默认 box-align 属性 stretch. 看看有什么效果产生, 当我们设置了 #main 的宽度后.
- main {
- background: yellow;
- width: 800px;
- }
但是我们仍有个疑问, 为什么 aside 不占据剩余的全部空间呢? 我们可以用新属性 box-flex 来试下. box-flex 使得元素占据整个空间.
- aside
- {
- display: block; / cause is HTML5 element /
- background: red;
- / take up all available space /
- -moz-box-flex: 1;
- -webkit-box-flex: 1;
- box-flex: 1;
- }
使用这个属性后, 不管 #main 有多宽, aside 都将占据整个可用的空间. 同时你也不必担心诸如 float 等产生的问题, 像使得元素被排挤到下一行.
我只是在这儿肤浅的说一下, 请参阅保罗爱尔兰优秀文章的详细信息. 然而, 使用此方法的时候也应注意一下兼容问题, 例如老的浏览器应该先测试下, 并且 提供必要的备注.
Resize
只有 Firefox 4 和 Safari 3 支持此属性. Resize 是 CSS3 UI 模型中的一部分, 可用于重定义 textarea 的大小.
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
默认情况下 webkit 浏览器和 Firefox 4 支持水平和垂直方向上的重定义.
- textarea {
- -moz-resize: vertical;
- -webkit-resize: vertical;
- resize: vertical;
- }
可能的值:
both: 重定义水平和垂直方向
horizontal: 水平调整大小限制
vertical: 垂直调整大小限制
none: 不支持重定义
10,Transition
也许 CSS3 最令人兴奋的增补, 就是在没有 JavaScript 的元素的情况下产生动画. 好像 IE9 还不支持此功能, 但这并不代表你不能使用这个功能, 关键是在于提高技能. 现在模仿一个效果, 当鼠标滑过右侧链接时, 文本向右滑动.
- The HTML
- <ul>
- <li>
- <a href="#" target="_blank"> Hover Over Me </a>
- </li>
- <li>
- <a href="#" target="_blank"> Hover Over Me </a>
- </li>
- <li>
- <a href="#" target="_blank"> Hover Over Me </a>
- </li>
- <li>
- <a href="#" target="_blank"> Hover Over Me </a>
- </li>
- </ul>
- The CSS
- ul a {
- -webkit-transition: padding .4s;
- -moz-transition: padding .4s;
- -o-transition: padding .4s;
- transition: padding .4s;
- }
- a:hover {
- padding-left: 6px;
- }
transition 有三个参数:
The property to transition. (Set this value to all if needed) 转换属性.(设置此值为所有如有需要)
The duration 持续时间
The easing type 缓动类型
为什么我们不将 transition 直接应用到 hover 上呢? 是因为我们只是在 mouseover 时生效, 当 mouseout 时元素将立即返回到 其最初的状态. 因为我们对效果做了调整, 所有对旧的浏览器不会产生任何影响. 接下来是通过文章所学, 我们来建立的一个简洁的效果. 大家可以通过查看源码来学习来.
来源: http://www.qdfuns.com/article/11376/4aca1290708f25d464e11f2503f21ea3.html