css – border-color的透明属性

前端之家收集整理的这篇文章主要介绍了css – border-color的透明属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现这个很酷的例子是border-color的透明属性用法来制作一个箭头.
我理解如何绘制边框以及带有一侧边框的空元素如何帮助实现箭头效果,但是在这个例子中让我徘徊的是使用透明.
看看这个简单的代码
<div id="daniel"></div>

CSS:

#daniel{
 border-color: rgba(111,111,0.2) transparent transparent;
 border-style: solid;
 border-width: 15px;
 position: absolute;
}

使用此代码,我得到一个指向下方的箭头. (JSFIDDLE)

只有一个透明我得到沙漏效果. (JSFIDDLE):

border-color: rgba(111,0.2) transparent;

令我困惑的是不知道border- {side}透明在这个速记属性中引用了什么.

希望有道理.
任何帮助赞赏.

谢谢

猜你在找的CSS相关文章