CSS分割线属性可以用于为网页中的不同部分添加分隔符,让页面更美观,更易于阅读。下面介绍几种常见的CSS分割线属性。
/* 添加水平分割线 */ hr { border: none; border-top: 1px solid #eee; /* 可以自定义颜色和宽度 */ clear: both; /* 清除浮动 */ margin: 20px 0; /* 可以自定义上下边距 */ } /* 添加垂直分割线 */ .divider { height: 30px; /* 可以自定义高度 */ width: 1px; background-color: #ccc; /* 可以自定义颜色 */ display: inline-block; margin: 0 10px; /* 可以自定义左右边距 */ } /* 添加虚线分割线 */ .dashed { border: none; border-top: 1px dashed #ddd; /* 可以自定义颜色和宽度 */ clear: both; /* 清除浮动 */ margin: 20px 0; /* 可以自定义上下边距 */ } /* 添加渐变分割线 */ .linear-gradient { border: none; height: 10px; /* 可以自定义高度 */ background: linear-gradient(to right, rgba(255, 255, 255, 0), #ccc, rgba(255, 255, 255, 0)); /* 可以自定义渐变方向、颜色和透明度 */ clear: both; /* 清除浮动 */ margin: 20px 0; /* 可以自定义上下边距 */ }
以上是一些常见的CSS分割线属性,使用它们可以使页面更加美观,提高用户的阅读体验。