CSS3边框

本篇教程将重点介绍border-radius、box-shadow和border-image这三个CSS3边框属性，帮助您深入了解它们的用法和效果。

一、CSS3圆角：border-radius

border-radius属性用于设置元素的边框圆角。通过指定不同的值，可以创建出各种形状的圆角效果。

语法：

border-radius: value;

示例：

.box {  
  border: 1px solid #0366d6;  
  border-radius: 20px; /* 创建10像素的圆角 */  
}

多个值：

border-radius: 10px 20px 30px 40px; /* 依次设置左上角、右上角、右下角、左下角的圆角 */

混合值：

border-radius: 10px 20px 30px / 40px 50px 60px; /* 设置水平和垂直方向的圆角 */

二、CSS3盒阴影：box-shadow

box-shadow属性用于给元素添加阴影效果，使元素更加立体和突出。

语法：

box-shadow: h-offset v-offset blur radius color;

示例：

.box {  
  box-shadow: 10px 10px 5px #888; /* 水平偏移10像素，垂直偏移10像素，模糊半径5像素，颜色为#888 */  
}

多层阴影：

box-shadow: h1 v1 blur1 radius1 color1, h2 v2 blur2 radius2 color2; /* 可以添加多个阴影效果 */

三、CSS3边界图片：border-image

border-image属性用于将图像作为元素的边框。通过指定图像源、切片和重复方式，可以创建出具有复杂样式的边框。

语法：

border-image: source slice repeat;

示例：

.box {  
  border: 5px solid transparent; /* 设置边框宽度为5像素，透明填充 */  
  border-image: url('border.png') 30% round; /* 使用'border.png'作为边框图像，切片为30%，重复方式为round */  
}

多层边框图像：

border-image: url('top.png') 30% round, url('bottom.png') 30% round, url('left.png') 30% round, url('right.png') 30% round; /* 可以使用多层边框图像创建复杂的边框样式 */

本文地址：https://www.tides.cn/p_css3-border