CSS深入理解之border_技术问答

<div class="add">
</div>

.add{
  position: relative;
  width: 120px;
  height: 120px;
  margin: 200px;
  color: #ccc;
  border: 1px solid;
  transition: color .5s;
}
.add::before,
.add::after{
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
}
.add::before{
  margin-top: -5px;
  margin-left: -30px;
  border-top: 10px solid;
}
.add::after{
  margin-top: -30px;
  margin-left: -5px;
  border-left: 10px solid;
}
.add:hover{
  color: red;
  cursor: pointer;
}

你看看这样的可以不

2018-07-12 2回答·1952浏览

橡子米米

double

贴代码看一下

2017-08-02 1回答·1364浏览
heisback

十字效果怎么通过:before和:after伪元素做出来？

li a{
        display: block;
        width: 100px;
        height: 80px;
        border: 1px solid;
        box-sizing: border-box;
        position: relative;
    }
    a:before{
        content: "";
        width: 60px;
        height: 60px;
        border-top: 10px solid;
        position: absolute;
        top: 35px;
        left: 20px;
    }
    a:after{
        content: "";
        width: 60px;
        height: 60px;
        border-left: 10px solid;
        position: absolute;
        top: 10px;
        left: 45px;
    }

2017-05-07 4回答·2235浏览
慕粉2216174813

这个有区别吗

已采纳田心枫的回答

前面是简写一般一句就搞定不用后面那么麻烦

2017-03-24 1回答·1458浏览
林思思是猪

transition 怎么用？？

transition实现元素的过度效果，语法格式：transition : transition-property || transition-duration || transition-timing-function || transition-delay;
分别表示：过度的属性，时间，方式，延迟时间。
这里只说明方式：linear(速度不变),ease(默认值，缓慢开始，缓慢结束),ease-in(先慢后快),ease-out(先快后慢),ease-in-out(和ease有所差别，但差别不大)
基于内核的方式在此不多说明，相信学习css的你会知道的。

2017-03-04 1回答·1357浏览
qq_简简单单爱_0

求助！！！！！！

不是插入的图片，用css写的形状。

2017-01-05 1回答·815浏览
qq_刺猬先生_03549865

那个加号怎么画的啊

已采纳光被四表的回答

<div class="add"></div>

.add{
width:100px;
height:100px;
border:1px solid;
color:#ccc;
transition:color 0.25s;
position:relative;
}
.add:before{
content:" ";
display:block;
width:60px;
height:10px;
border-color:#ccc;
border-top:10px solid;
position:absolute;
top:50%;
left:50%;
margin: -5px 0 0 -30px ;
}
.add:after{
content:" ";
display:block;
width:10px;
height:60px;
border-color:#ccc;
border-left:10px solid;
position:absolute;
top:50%;
left:50%;
margin:-30px 0 0 -5px;
}
.add:hover{
color:#f6c;
}

2016-12-29 3回答·3640浏览
qq_野火燎原_0

border-color之hover图片变色

.add{
width:100px;
height:100px;
border:1px solid;
color:#ccc;
transition:color 0.25s;
position:relative;
}
.add:before{
content:" ";
display:block;
width:60px;
height:10px;
border-color:#ccc;
border-top:10px solid;
position:absolute;
top:50%;
left:50%;
margin: -5px 0 0 -30px ;
}
.add:after{
content:" ";
display:block;
width:10px;
height:60px;
border-color:#ccc;
border-left:10px solid;
position:absolute;
top:50%;
left:50%;
margin:-30px 0 0 -5px;
}
.add:hover{
color:#f6c;
}

2016-12-14 3回答·1364浏览
xh向日葵4282116

鼠标移到图形上面，边框和图形同时发生变色，只需要设置边框border-color跟图形过渡transition的值就可以了吗？

对的啊，border你设置1px solid; 不设置color，border默认会把边框的颜色变成你字体的color，所以边框的颜色就跟你字体的颜色一样了，然后当你悬浮hover的时候你只需改变color的值边框就会随之改变

2016-11-28 1回答·1241浏览
龙晓秀

hover与图形变色

已采纳的回答

2016-11-16 2回答·1892浏览

数据加载中...