知识库

Appearance

Return to top
On this page

CSS 边框与轮廓

CSS 边框和轮廓用于定义元素的边界和外轮廓样式。

概述

边框和轮廓是元素视觉呈现的重要组成部分，它们定义了元素的边界和突出显示效果。

边框属性

border

边框的简写属性：

css
.element {
  border: 2px solid #ccc; /* 宽度 样式 颜色 */
  border: 1px dotted red;
}

border-width

设置边框宽度：

css
.element {
  border-width: 1px; /* 四边相同 */
  border-width: 2px 4px; /* 上下 左右 */
  border-width: 1px 2px 3px 4px; /* 上 右 下 左（顺时针） */
  
  /* 单独设置各边 */
  border-top-width: 2px;
  border-right-width: 3px;
  border-bottom-width: 2px;
  border-left-width: 3px;
}

border-style

设置边框样式：

css
.element {
  border-style: solid; /* 实线 */
  border-style: dotted; /* 点线 */
  border-style: dashed; /* 虚线 */
  border-style: double; /* 双线 */
  border-style: groove; /* 3D凹槽效果 */
  border-style: ridge; /* 3D凸起效果 */
  border-style: inset; /* 3D内嵌效果 */
  border-style: outset; /* 3D外凸效果 */
  border-style: none; /* 无边框 */
  border-style: hidden; /* 隐藏边框 */
}

border-color

设置边框颜色：

css
.element {
  border-color: #333; /* 四边相同 */
  border-color: red green blue yellow; /* 上 右 下 左 */
  
  /* 单独设置各边 */
  border-top-color: #ff0000;
  border-right-color: #00ff00;
  border-bottom-color: #0000ff;
  border-left-color: #ffff00;
}

单边边框

单独设置某一边的边框：

css
.element {
  border-top: 2px solid #ccc;
  border-right: 1px dashed red;
  border-bottom: 3px double blue;
  border-left: 2px dotted green;
}

圆角边框

border-radius

设置边框圆角：

css
.element {
  border-radius: 5px; /* 四角相同 */
  border-radius: 10px 5px; /* 左上右下 / 右上左下 */
  border-radius: 10px 5px 15px 20px; /* 左上 右上 右下 左下 */
  
  /* 椭圆圆角 */
  border-radius: 10px / 20px;
  
  /* 单独设置各角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

边框图像

border-image

使用图像作为边框：

css
.border-image {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
  /* 图像 裁剪 重复方式 */
}

border-image-source

指定边框图像源：

css
.element {
  border-image-source: url('image.png');
  border-image-source: linear-gradient(to bottom, red, blue);
}

border-image-slice

指定边框图像的裁剪位置：

css
.element {
  border-image-slice: 30; /* 裁剪30px */
  border-image-slice: 30% fill; /* 百分比裁剪 */
}

border-image-width

指定边框图像的宽度：

css
.element {
  border-image-width: 10px;
  border-image-width: 5% 10px 15% 20px; /* 上 右 下 左 */
}

border-image-outset

指定边框图像的外扩距离：

css
.element {
  border-image-outset: 5px;
}

border-image-repeat

指定边框图像的重复方式：

css
.element {
  border-image-repeat: stretch; /* 拉伸 */
  border-image-repeat: repeat; /* 重复 */
  border-image-repeat: round; /* 平铺（压缩以完整显示） */
  border-image-repeat: space; /* 平铺（留空隙以完整显示） */
}

轮廓属性

outline

轮廓的简写属性：

css
.element {
  outline: 2px solid red; /* 宽度 样式 颜色 */
  outline: 1px dotted #000;
}

outline-width

设置轮廓宽度：

css
.element {
  outline-width: thin; /* 细 */
  outline-width: medium; /* 中等（默认） */
  outline-width: thick; /* 粗 */
  outline-width: 2px; /* 具体值 */
}

outline-style

设置轮廓样式：

css
.element {
  outline-style: solid; /* 实线 */
  outline-style: dotted; /* 点线 */
  outline-style: dashed; /* 虚线 */
  outline-style: double; /* 双线 */
  outline-style: groove; /* 凹槽 */
  outline-style: ridge; /* 凸起 */
  outline-style: inset; /* 内嵌 */
  outline-style: outset; /* 外凸 */
  outline-style: none; /* 无轮廓 */
}

outline-color

设置轮廓颜色：

css
.element {
  outline-color: red;
  outline-color: #00ff00;
}

outline-offset

设置轮廓与边框的距离：

css
.element {
  outline: 2px solid red;
  outline-offset: 5px; /* 轮廓与边框之间有5px的间隙 */
}

实用技巧

创建三角形

css
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
  border-left: 20px solid transparent;
}

不同形状的边框

css
.circle {
  border-radius: 50%;
  border: 2px solid #ccc;
}

.ellipse {
  border-radius: 50%;
  width: 100px;
  height: 50px;
  border: 2px solid #ccc;
}

双色边框

css
.dual-border {
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue);
  border-image-slice: 1;
}

动画边框

css
.animated-border {
  border: 2px solid transparent;
  background: linear-gradient(45deg, #ff0000, #0000ff) border-box;
  background-clip: padding-box, border-box;
  animation: borderAnimation 2s infinite linear;
}

@keyframes borderAnimation {
  0% { border-color: red; }
  50% { border-color: blue; }
  100% { border-color: red; }
}

毛玻璃效果边框

css
.frosted-border {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

性能考虑

避免不必要的边框重绘

css
.optimized-border {
  /* 使用 transform 而非改变边框来实现动画 */
  transition: transform 0.3s ease;
}

.optimized-border:hover {
  transform: scale(1.05);
}

可访问性考虑

轮廓对于键盘导航的重要性

css
.accessible-focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* 避免完全移除轮廓，这会影响键盘用户 */
/* 不推荐: outline: none; */
/* 推荐: 提供替代的焦点指示器 */
.accessible-focus:focus {
  background-color: #f0f8ff;
  box-shadow: 0 0 0 2px #007cba;
}

浏览器兼容性

渐进增强的边框样式

css
.progressive-border {
  border: 1px solid #ccc;
  border-radius: 4px; /* 基础圆角 */
}

@supports (border-radius: 50%) {
  .progressive-border {
    border-radius: 8px; /* 更圆润的圆角 */
  }
}

最佳实践

  • 考虑可访问性，不要完全移除焦点轮廓
  • 使用适当的边框样式来区分元素状态
  • 合理使用圆角以提高视觉效果
  • 考虑不同设备的显示效果
  • 优化边框图像的性能
  • 保持视觉一致性和设计系统