前言
在现代网页设计中，CSS 提供了多种强大的特性来增强视觉效果和用户体验。本文将介绍几个重要的 CSS 特性，包括 linear-gradient 渐变、input 样式、inset 简写属性、border-collapse: collapse 表格边框合并以及 <label> 元素的 for 属性。通过示例代码和详细解释，我们将帮助读者理解这些特性及其实际应用。
linear-gradient
```Vue 一： 一般渐变 未设置角度，则默认为180deg（从上到下） ```  linear-gradient ```Vue 方法：linear-gradient(direction, color-stop1, color-stop2, …) direction：第一个参数表示渐变的方向。其可以是一个具体的角度值如45deg，或者是具体的方向值如to top，表示自下而上渐变；to bottom表示自上而下渐变【默认为to bottom】，还有 to right、to left等。 #grad { background-image: linear-gradient(red, yellow, blue); } background: linear-gradient(45deg, #e66465 10%, #9198e5 100%); 百分号 为 开始和 位置 background: linear-gradient(45deg, #e66465 10%, #9198e5 40%, #11e546 100%); ```
input
```Plain Text .myinput { color: red; /* 修改边框 */ /* border: 10px solid blue; */ /* 修改 外面的边框 */ /* outline: 10px solid red; */ /* 边框颜色 */ /* border-color: blue; */ /* 圆角边框 */ /* border-radius: 10px; */ border: 0; /* background-color: green; */ /* 光标颜色 */ caret-color:#ffa502; /* width: 200px; */ /* 向内缩10px 可以用来增加长度 */ padding: 10px; /* 会修改 输入框的大小 */ font-size: 22px; /* 文本框的高度 */ height: 50px; /* */ } input:focus{ /* 获取焦点之后的边框 */ outline: 1px solid #AFECAB; } ```
inset
使用来简写 position ：reative 的上下左右
inset: 0; /* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */ inset: 1px 2px; /* 等同于 `top: 1px; right: 2px; bottom: 1px; left: 2px;` */ inset: 1px 2px 3px; /* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 2px;` */ inset: 1px 2px 3px 4px; /* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 4px;` */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 400px; height: 400px; background-color: aqua; position: absolute; } .inner{ width: 100px; height: 100px; background-color: rebeccapurple; position: relative; inset: 100px 100px 100px 100px; } </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
table
border-collapse: collapse; 是CSS中的一个属性，它的作用是定义了二个相邻的表格边框是否合并为一条边框来显示，其默认值是separate，表示相邻边框之间不合并且各自独立显示。
当设置为 collapse 时，相邻边框将会被合并为一条边框来显示，从而创建了更加整洁、优美的表格布局。
当在一个表格中采用相邻表格单元使用相同的边框时，使用 border-collapse: collapse; 可以使表格布局更加整齐，易于视觉处理。
<!DOCTYPE html> <html> <head> <title>表格示例</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: 1px solid black; } tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> </tbody> </table> </body> </html>
for 里面的label
for 属性是 <label> 元素的一个属性。它定义了 <label> 元素所关联的控件元素的 ID。当用户点击标签时，浏览器会将焦点转移到配对的控件元素上。
