问题

1. 省略号ellipsis之怪现象

<style>  .test {    text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;    width: 500px;    color: green;  }  .test span {    color: red;  }</style><div class="test">  地理数据是各种地理特征和现象间关系的符号化表示，  <span>包括空间位置、属性特征及时态特征三部分</span></div>

上述代码中的文本超出的颜色会显示为绿色，而不是红色

<style>  .test {    text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;    width: 500px;    color: green;  }  .test div {    color: red;  }</style><div class="test">  <div>    地理数据是各种地理特征和现象间关系的符号化表示，    包括空间位置、属性特征及时态特征三部分  </div></div>

上述代码中的文本超出的省略号不会被现实

结论: 行内元素的的文本超出颜色会继承自最近的父级块级元素的文字颜色，text-overflow 尽对块级元素生效，父级的 text-overflow 不会对块级子级元素生效,而且overflow: hidden 对块级子元素不生效，换行显示

2. 如何给边框绘制一个渐变色

使用border-image属性设置渐变色

<style>  body {    background: gray;  }  .test {    width: 500px;    height: 100px;    margin: 100px auto;    border: 1px solid transparent;    border-image: linear-gradient        145deg,        #07d1faff 0%,        #07d1fa33 30%,        #07d1fa33 70%,        #07d1faff       1;    background: rgba11, 51, 59, 0.95;  }</style><div class="test"></div>