CSS3 用户界面


CSS 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。

在本章中,您将学到以下 CSS 用户界面属性:

  • resize
  • outline-offset

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
resize4.0不支持5.04.015.0
outline-offset4.015.05.04.09.5

CSS 调整大小

resize 属性规定元素是否应(以及如何)被用户调整大小。

这个 div 元素可由用户调整大小!

调整大小:单击并拖动此 div 元素的右下角。

注意:Internet Explorer 不支持 resize 属性。

下例只允许用户调整 <div> 元素的宽度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. border: 2px solid;
  7. padding: 20px;
  8. width: 300px;
  9. resize: horizontal;
  10. overflow: auto;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>resize 属性</h1>
  16. <div>
  17. <p>只允许用户调整 div 元素的宽度。</p>
  18. <p>如需调整:请点击并拖动 div 元素的右下角。</p>
  19. </div>
  20. </body>
  21. </html>

下例只允许用户调整 <div> 元素的高度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. border: 2px solid;
  7. padding: 20px;
  8. width: 300px;
  9. resize: vertical;
  10. overflow: auto;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>resize 属性</h1>
  16. <div>
  17. <p>只允许用户调整 div 元素的高度。</p>
  18. <p>如需调整:请点击并拖动 div 元素的右下角。</p>
  19. </div>
  20. </body>
  21. </html>

下例允许用户能够调整 <div> 元素的高度和宽度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. border: 2px solid;
  7. padding: 20px;
  8. width: 300px;
  9. resize: both;
  10. overflow: auto;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>resize 属性</h1>
  16. <div>
  17. <p>允许用户调整 div 元素的高度和宽度。</p>
  18. <p>如需调整:请点击并拖动 div 元素的右下角。</p>
  19. </div>
  20. </body>
  21. </html>

在许多浏览器中,<textarea> 默认可调整大小。在这里,我们使用了 resize 属性来禁用这种可缩放性:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. textarea#test {
  6. resize: none;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>resize 属性</h1>
  12. <p>在很多浏览器中,textarea 元素默认是可调整尺寸的。在本例中,我们已用 resize 属性来禁用这种可调整性:</p>
  13. <textarea id="test">Textarea - 不可调整</textarea>
  14. <br><br>
  15. <textarea>Textarea - 可调整(默认)</textarea>
  16. </body>
  17. </html>

CSS 轮廓偏移

outline-offset 属性在轮廓与元素的边缘边框之间添加空间。

这个 div 在边框边缘外有 15px 的轮廓。
注意:轮廓与边框不同!与边框不同,轮廓线是在元素边框之外绘制的,并且可能与其他内容重叠。同时,轮廓也不是元素尺寸的一部分:元素的总宽度和高度不受轮廓线宽度的影响。

下面的例子使用 outline-offset 属性添加了边框和轮廓之间的空间:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div.ex1 {
  6. margin: 20px;
  7. border: 1px solid black;
  8. outline: 4px solid red;
  9. outline-offset: 15px;
  10. }
  11. div.ex2 {
  12. margin: 10px;
  13. border: 1px solid black;
  14. outline: 5px dashed blue;
  15. outline-offset: 5px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>outline-offset 属性</h1>
  21. <div class="ex1">这个 div 有 4 像素的红色实线轮廓,位于边框边缘外 15 像素处。</div>
  22. <br>
  23. <div class="ex2">这个 div 有 5 像素的蓝色虚线轮廓,位于边框边缘外 5 像素处。</div>
  24. </body>
  25. </html>

CSS 用户界面属性

下表列出了所有用户界面属性:

属性描述
outline-offset在轮廓和元素的边框边缘之间添加空间。
resize规定元素是否可由用户调整大小。

分类导航