CSS用户界面
CSS调整大小
resize 属性规定元素是否应（以及如何）被用户调整大小。下例只允许用户调整 <div> 元素的宽度：
div {resize: horizontal;overflow: auto;
}
下例只允许用户调整 <div> 元素的高度：
div {resize: vertical;overflow: auto;
}下例允许用户能够调整 <div> 元素的高度和宽度：
div {resize: both;overflow: auto;
}在许多浏览器中，<textarea> 默认为可调整大小。在这里，可以使用 resize 属性来禁用这种可缩放性：
textarea {resize: none;
}
CSS 轮廓偏移
outline-offset 属性在轮廓与元素的边框之间添加空间。
注意：轮廓与边框不同！轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。
下面的例子使用 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;
}
CSS变量
var() 函数用于插入 CSS 变量的值。 CSS 变量可以访问DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。
使用CSS变量的一种好方法涉及设计的颜色。 您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同地颜色。
var() 函数的语法
var() 函数用于插入CSS变量的值。var() 函数的语法如下：
var(name, value)| 值 | 描述 |
|---|---|
| name | 必需。变量名（以两条破折号开头）。 |
| value | 可选。回退值（在未找到变量时使用）。 |
注释：变量名称必须以两个破折号 (--) 开头，且区分大小写！
var() 如何工作
首先：CSS变量可以有全局和局部作用域。 全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。
如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。
首先，声明两个全局变量（--blue 和 --white)。 然后，我们使用 var() 函数稍后在样式表中插入变量的值：
:root {--blue: #1e90ff;--white: #ffffff;
}body { background-color: var(--blue); }h2 { border-bottom: 2px solid var(--blue); }.container {color: var(--blue);background-color: var(--white);padding: 15px;
}button {background-color: var(--white);color: var(--blue);border: 1px solid var(--blue);padding: 5px;
}使用var() 有如下优势：
- 使代码更易于阅读（更容易理解）
- 使修改颜色值更加容易
如需将蓝色和白色改为较为柔和的蓝色和白色，您只需要修改两个变量值。CSS 变量也可以在特定的选择器中定义。这些变量仅在定义它们的选择器及其子元素中有效：
.card { --card-bg: #ffffff; /* 局部变量 */ background-color: var(--card-bg); padding: 20px; border: 1px solid #ddd;
} .card:hover { --card-bg: #f0f0f0; /* 更新局部变量 */ background-color: var(--card-bg);
} CSS覆盖变量
用局部变量覆盖全局变量
有时，我们希望变量仅在页面的特定部分中进行更改。 假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。 当我们在这个选择器中使用 var(--blue) 时，它将使用此处声明的局部 --blue变量值。
我们看到局部的 --blue 变量会覆盖button 元素的全局 --blue 变量：
:root {--blue: #1e90ff;--white: #ffffff;
}body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;
}button {--blue: #0000ff;background-color: var(--white);color: var(--blue);border: 1px solid var(--blue);padding: 5px;
}添加一个新的局部变量
如果只在一个地方使用一个变量，我们也可以声明一个新的局部变量。
:root {--blue: #1e90ff;--white: #ffffff;
}body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;
}button {--button-blue: #0000ff; /*新的局部变量*/background-color: var(--white);color: var(--button-blue);border: 1px solid var(--button-blue);padding: 5px;使用JavaScript 更改变量
CSS变量可以访问DOM，这意味着您可以通过 JavaScript 更改它们。这个例子说明了如何创建脚本来显示并更改实例中的 --blue 变量。
<script>
// 获取根元素
var r = document.querySelector(':root');// 创建获取变量值的函数
function myFunction_get() {// Get the styles (properties and values) for the rootvar rs = getComputedStyle(r);// Alert the value of the --blue variablealert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}// 创建设置变量值的函数
function myFunction_set() {// Set the value of variable --blue to another value (in this case "lightblue")r.style.setProperty('--blue', 'lightblue');
}
</script><div class="container"><h2>Welcome to Shanghai!</h2><p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p><p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p><p><button>Yes</button><button>No</button></p>
</div>
<br><button type="button" onclick="myFunction_get()">使用 JavaScript 来获取 CSS 变量</button>
<button type="button" onclick="myFunction_set()">使用 JavaScript 来更改 CSS 变量</button>
在媒体查询中使用变量
现在，我们希望在媒体查询中修改变量值。
提示：媒体查询旨在为不同设备（显示器、平板电脑、手机等）定义不同的样式规则。将在之后的学习中讲到。
在这里，首先为 .container类声明一个名为 --fontsize 的新局部变量。我们将其值设置为25像素。然后在 .container 类中进一步使用它。然后，创建一个@media规则，内容为”当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsize 变量值更改为50px。"
/* 变量声明 */
:root {--blue: #1e90ff;--white: #ffffff;
}.container {--fontsize: 25px;
}/* 样式 */
body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;font-size: var(--fontsize);
}@media screen and (min-width: 450px) {.container {--fontsize: 50px;}
}这是另一个例子，在其中还更改了@media 规则中的 --blue 变量的值：
/* 变量声明 */
:root {--blue: #1e90ff;--white: #ffffff;
}.container {--fontsize: 25px;
}/* 样式 */
body {background-color: var(--blue);
}h2 {border-bottom: 2px solid var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;font-size: var(--fontsize);
}@media screen and (min-width: 600px) {.container {--fontsize: 50px;}:root {--blue: lightblue;}
}
