css一条边框一半颜色 |css中文本右对齐

border: 10px solid transparent;
border-image: linear-gradient(to bottom, #f1c40f 50%, transparent 50%);

首先，为一个元素添加一条边框的方法很简单，只需要使用CSS的border属性即可。例如：

border: 10px solid #000;

这里大家给一个元素添加了一条宽度为10像素、颜色为黑色的实线边框。但是，如何让这个边框只显示一半颜色呢？大家可以使用CSS的border-image属性来实现。

border-image属性可以让大家为边框指定一张图片，这张图片会被平铺或拉伸以填充整个边框。在这个例子中，大家使用了CSS渐变来创建一张图片，这个渐变从黄色到透明，中间位置是50%。然后大家将这张图片作为边框的图片，并将边框的颜色设置为透明，这样这条边框就只显示了渐变的一半了。

完整代码如下：

div {
border: 10px solid transparent;
border-image: linear-gradient(to bottom, #f1c40f 50%, transparent 50%);
}

这样，大家就成功地为一个元素创建了一条只显示一半颜色的边框了。