CSS 用户界面


目录

    显示目录


CSS 用户界面

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

  • resize
  • outline-offset

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
resize 4.0 79.0 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS 调整大小

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

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

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

例子

div
{
   
resize: horizontal;
   
overflow: auto;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


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

例子

div
{
   
resize: vertical;
  overflow: auto;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


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

例子

div
{
   
resize: both;
   
overflow: auto;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


在许多浏览器中,<textarea> 默认情况下可以调整大小。在这里,我们使用 resize 属性来禁用可调整大小:

例子

textarea {
  resize: none;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

&lt;textarea id="test">Textarea - Not resizable&lt;/textarea>
<br><br>

&lt;textarea>Textarea - Resizable (default)&lt;/textarea>

</body>
</html>




CSS 轮廓偏移

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

This div has an outline 15px outside the border edge.

注意:轮廓与边框不同!与边框不同,轮廓是 绘制在元素边框之外,并且可能与其他内容重叠。另外,大纲是 不是元素尺寸的一部分;元素的总宽度和高度 不受轮廓宽度的影响。

以下示例使用 outline-offset 属性添加空间 边框和轮廓之间:

例子

 div.ex1 {
  margin: 20px;
  border: 
  1px solid black;
  outline: 4px solid red;
  
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>



CSS 用户界面属性

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

outline-offset

在轮廓和元素的边缘或边框之间添加空间

resize

指定元素是否可由用户调整大小