CSS的一些其他属性

一 溢出省略号

overflow：hidden;       //溢出隐藏
text-overflow：eclipse;        //溢出的文本为省略号
white-space：nowarp;        //不换行

执行效果如图：

---

---

二  颜色渐变

1 区域颜色的渐变

        .box{
            width:300px;
            height:300px;
            margin:100px 0 0 200px;
            position: relative;
        }
        .box div{
            width:200px;
            height:200px;
            background: linear-gradient(270deg,green,greenyellow,orange);

        }
<div class="box">
<div>sdf</div>
</div>

执行结果如下：

---

---

2  线的颜色的渐变

.box>div::before,.box>div:after{
            content:"";
            height:1px;
            width:300px;
            position: absolute;
            left:30px;
            right:30px;
            background:linear-gradient(90deg,#333,#eee,#eee,#333);
        }
        .box>div::after{
           top:200px;
        }
        .box>div:before{
            top:0;

执行结果如下：

---

---

3 鼠标点击时的渐变

transition: all .3s linear;   //所有的以0.3秒匀速变化

三  三角符的表示

<style>
        div{
            width:0px;
            height:100px;
            border-left:solid 8px green;
            border-bottom:solid 8px red;
            border-right:solid 8px green;
        }
</style>

执行结果如下：

---

---