/* 设置边框横向渐变 */
div{
border: 5px solid;
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
}以上代码将会把
元素的边框设置为宽度为5个像素的实线。border-image属性允许大家为边框选择渐变效果。在这里大家使用了linear-gradient函数，它可以在水平方向上创建一个渐变。to right表示渐变从左到右。大家可以使用其他方向的渐变，例如from left、to top等。渐变中的颜色从#f00开始到#0f0，最终到达#00f。这一系列的颜色将会按照相应关系进行顺序渐变。
接下来大家还需要使用border-image-slice属性，将图片的大小设置为1个像素。这个属性很重要，因为它决定了图片是否重复。如果大家不指定这个值，图片将重复到整个边框。
那么如何自定义渐变颜色呢？大家可以使用rgba颜色值或是十六进制颜色码。这两种颜色可以用来表示任何颜色和透明度。可以在渐变中使用多个颜色，以创建更复杂的视觉效果。
总结一下，使用CSS3设置边框横向渐变是一种很酷的技巧，在网站设计中具有很高的实用价值。了解这个属性的使用方法有助于大家在设计中实现更多的效果，让网站的外观更加吸引人。