CSS3 用户界面
CSS3的用户界面模块为页面的UI表现提供了更多效果和选择方案。
增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
resize 属性
属性定义及使用说明
resize属性指定一个元素是否是由用户调整大小的。
注意：resize属性适用于计算其他元素的溢出值是不是"visible"。
默认值： none
继承： no
版本： CSS3
JavaScript 语法： object.style.resize="both"
浏览器支持：Firefox 4+, Chrome,和Safari支持resize属性。
语法
resize: none|both|horizontal|vertical:
none：不允许用户调整元素大小。不允许用户调整元素大小。
both：用户可以调节元素的宽度和高度。
horizontal： 用户可以调节元素的宽度
vertical： 用户可以调节元素的高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 600px;
height: 300px;
border: 1px solid #000;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>请注意观察方框右下角</p>
<div class="box"></div>
</body>
</html>
box-sizing属性
box-sizing具有content-box和border-box两个值。
box-sizing: content-box;
当设置box-sizing:content-box;时，浏览器对盒模型的解释遵从W3C标准，当它定义width和height时，它的宽度不包括border和padding。
box-sizing: border-box;
当 设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border 和padding则是被包含在宽高之内的。内容的宽和高可以通过定义width和height减去相应方向的padding和border的宽度得到。内 容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</body>
</html>outline-offset 属性
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
1. 轮廓不占用空间
2. 轮廓可能是非矩形
语法：
outline-offset：<length> | inherit
<length>：定义轮廓距离容器的值。
inherit：默认继承。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
margin: 50px auto;
outline: 10px solid rgba(255,255,0,9);
background: black;
outline-offset: 10px;
border:5px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
汪汪
学习了
7年前 添加回复 0