主页 / 问题 / 947741
Accepted
Dmitriy
Asked:2020-02-22 01:21:11 +0800 CST2020-02-22 01:21:11 +0800 CST

如何更改使用 content 属性指定的元素的颜色

  • 772

页面上有一个元素

.select__gap:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;

    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid #000;

    -webkit-transition: all .27s ease-in-out;
         -o-transition: all .27s ease-in-out;
            transition: all .27s ease-in-out;

    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}

这是一个向下箭头，单击时会展开。她是黑人。如何改变它的颜色？colory属性.select__gap不起作用。

css

1 个回答

  1. Best Answer

    该元素的显示部分由样式指定

    border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 14px solid #000;

    此属性条目border-*是缩写

    border-*-width: ...
border-*-style: ...
border-*-color: ...

    如您所见，左右边框设置为透明，而上边框设置为黑色。

    要重新绘制，只需将其替换为所需的即可。

    为了清楚地说明它是如何工作的，将每个边框用自己的颜色着色就足够了：

    .select__gap:after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  margin-top: -7px;
  border-left: 7px solid blue;
  border-right: 7px solid green;
  border-top: 14px solid red;
}
    <div class="select__gap"></div>

    • 1

相关问题