首页 > 其他分享> > css实现添加框color控制变色效果

css实现添加框color控制变色效果

2022-06-04 00:34:11 作者：互联网

实现效果

用border实现边框
伪元素实现加号
鼠标悬浮在框上变色

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="index.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
     <div class="add">
    </div>
  </body>
</html>

css

.add {
    margin: 150px auto;
    width: 100px;
    height: 100px;
    color: #ccc;
    transition: color 0.25s;
    border: 1px solid;
    position: relative;
}

.add::before {
    content: '';
    border-top: 10px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
}

.add::after {
    content: '';
    border-left: 10px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 50px;
}
.add:hover{
    color: blue;
}

知识点

color其实是默认的border-color，所以可以改变color来改变默认颜色从而控制全体border的颜色改变

标签：color,top,50%,solid,add,变色,border,css
来源： https://www.cnblogs.com/kihyunBlog/p/16341073.html