CSS3 用户界面
2016-01-25 00:00
246 查看
摘要: CSS3 用户界面
在本章中,您将了解以下的用户界面属性:
resize
box-sizing
outline-offset
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代码如下:
轮廓与边框有两点不同:
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
The CSS code is as follows:
原文地址:http://www.phplearn.cn/css3/css3-user-interface.html
CSS3 用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。在本章中,您将了解以下的用户界面属性:
resize
box-sizing
outline-offset
浏览器支持
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。
CSS3 调整尺寸(Resizing)
CSS3中,resize属性指定一个元素是否应该由用户去调整大小。这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代码如下:
由用户指定一个div元素尺寸大小: div { resize:both; overflow:auto; }
CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。规定两个并排的带边框方框: div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }
CSS3 外形修饰(outline-offset )
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同:
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
The CSS code is as follows:
规定边框边缘之外 15 像素处的轮廓: div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
原文地址:http://www.phplearn.cn/css3/css3-user-interface.html
相关文章推荐
- 修改progressbar的样式
- 纯CSS实现的表格滚动条效果
- CSS块级元素、内联元素概念
- CSS float 属性
- css3 box-shadow
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS那些事儿-阅读随笔2(选择符的组合与优先级/权重)
- html+css制作简易版Baymax
- 用css伪元素实现tooltip效果
- CSS+DIV:理论实战缺一不可
- css学习之id和class选择器
- 使用css垂直水平居中
- css学习之css语法
- CSS 布局 问题 及 解答
- LaTex 单栏样式模板中插入双栏表格
- css学习笔记20160120链接列表表格
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)1~3章
- 我的网页搭建中篇02——网页布局01
- CSS实现文字随屏幕变化
- CSS学习03