其他不常用的属性汇总
大约 3 分钟
列表相关的样式
ul {
list-style-type: none; /*表示去掉所有列表自带的小黑点*/
}
list-style-type 标签还有其他属性,不常用
注意:此标签只能用在 ul、ol 或者 li 上面
表格相关的样式(只能在table标签上使用)
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
table-layout | 设置列宽度 | auto:自动,列宽根据内容自动计算(默认值)。fixed:固定列宽,平均分。 |
border-spacing | 单元格间距 | CSS 中可用的长度值。 生效的前提:单元格不能合并 |
border-collapse | 合并单元格边框 | collapse:合并separate:不合并 |
empty-cells | 隐藏没有内容的单元格 | show:显示(默认)hide:隐藏生效前提:单元格不能合并 |
caption-side | 设置表格标题位置 | top:上面(默认)bottom:在表格下面 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
table,
tr,
td,
th {
border: 1px solid #000;
}
table {
margin: auto;
width: 500px;
border-collapse: collapse;
text-align: center;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>UserName</th>
<th>Location</th>
</tr>
<tr>
<td>1</td>
<td>joe</td>
<td>New York</td>
</tr>
<tr>
<td>1</td>
<td>joe</td>
<td>New York</td>
</tr>
<tr>
<td>1</td>
<td>joe</td>
<td>New York</td>
</tr>
</table>
</body>
</html>
outline(轮廓线)CSS3
div {
/* 清除默认轮廓样式
可以取消input表单的蓝色轮廓
*/
outline: none;
outline: dotted 5px red;
outline-offset: 15px;
}
| 属性 | 含义 | 属性值 | 备注 |
|---|---|---|---|
| outline-width | 边框粗细 | thin 细线(通常为 1px)、 medium 默认(通常为 3px)、 thick 粗线(通常为 5px) | 主要使用绝对单位。如( px、pt、cm、em ) |
| outline-style | 边框风格 | solid - 定义实线边框、dotted - 定义点线边框、dashed - 定义虚线边框、等 | |
| outline-color | 轮廓颜色 | transparent(表示透明颜色) | |
| outline-offset | 轮廓偏移 | ||
| outline | 简写 | 按照顺序书写,outline-style 为必须,要不然定义其他没有效果 |
- 轮廓是在元素边框之外绘制的,可能与其他内容重叠。
- 元素的总宽度和高度不受轮廓线宽度的影响。
- 使用方式和 border 相同,平时使用较少,主要用在:hover 中使用
box-shadow(盒子阴影)css3
box-shadow: h-shadow v-shadow blur spread color inset;
div {
box-shadow: 5px 5px 12px 3px rgba(0, 0, 0, 0.3);
}
盒子阴影不占空间,不影响其他盒子排列
| 属性 | 说明 | 是否必须 |
|---|---|---|
| h-shadow | 水平阴影位置(允许负值) | 是 |
| v-shabow | 垂直阴影位置(允许负值) | 是 |
| blur | 模糊程度 | 否 |
| spear | 模糊大小 | 否 |
| color | 颜色 | 否 |
| inset | 默认外阴影,inset 为内阴影 | 否 |
cursor(鼠标样式)
| 属性值 | 样式 |
|---|---|
| default | 箭头(默认) |
| pointer | 小手 |
| movie | 移动 |
| text | 文本光标 |
| not-allowed | 禁止 |
overflow(溢出隐藏)
表示隐藏溢出元素(超过指定的宽度和高度)
| 属性值 | 说明 |
|---|---|
| visible | 不剪切内容也不添加滚动条(默认) |
| hidden | 超出内容隐藏掉 |
| scroll | 不管是否超出,都会显示滚动条 |
| auto | 超出就显示滚动条,不超出不显示 |
注意:如果有定位的盒子,请慎用 overflow:hidden,因为它会隐藏多余部分
函数
filter: blur(
5px
); /*filter 滤镜的意思 blur为模糊处理,数字越大越模糊(要加单位)*/
width: calc(100% / 2);
width: calc(100%-50px); /*括号里面可以使用"+ - * /(反斜杠)"来计算*/