CSS3 ??? ?????
CSS3 ??? ????? ??? ???? UI ??? ?? ? ?? ??? ??? ?????.
?? ??, ?? ?? ? ?? ???? ???? ? ?? ??? ??? ????? ??? ??????.
resize ??
?? ?? ? ?? ??
resize ??? ???? ??? ??? ???? ??? ?????.
Note: resize ??? ?? ??? ???? ?? "??"??? ??? ???? ? ?????.
???: ??
??: no
??: CSS3
JavaScript ??: object.style.resize="both"
???? ??: Firefox 4+, Chrome ? Safari? ?? ?? ??? ?????.
Syntax
resize: none|both|horizontal|vertical:
none: ???? ??? ??? ???? ?? ???? ????. ???? ??? ??? ???? ?? ???? ???.
??: ???? ??? ??? ??? ??? ? ????.
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>請(qǐng)注意觀察方框右下角</p>
<div class="box"></div>
</body>
</html>
box-sizing ??
box-sizing?? ??? ??? ??? ???? ? ?? ?? ????.
box-sizing:content-box;
box-sizing:content-box;? ???? ????? ?? ?? ??? W3C ??? ??? ??? ??? ??? ? ???? ???? ??? ???? ????. .
box-sizing: border-box;
box-sizing: 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> | ??
<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>
