纯css实现加号“+”效果(代码示例)


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章来给大家通过代码示例介绍一下使用纯css实现加号“+”效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

实现下图的加号效果:

1.png

若想实现这个效果, 只需一个div元素即可搞定。

需要用到css的为了before和after, 以及border特性。

先设置一个div便签

1

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

再设置一个边框:

1

2

3

4

5

6

7

8

.add {

  border: 1px solid;

  width: 100px;

  height: 100px;

  color: #ccc;

  transition: color .25s;

  position: relative;

}

此时边框是这样的:

2.png

我们可以利用伪类before和其border-top来设置一个“横”:

1

2

3

4

5

6

7

8

9

.add::before{

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  width: 80px;

  margin-left: -40px;

  margin-top: -5px;

  border-top: 10px solid;

}

阅读剩余部分

相关阅读 >>

css font-weight属性怎么用

css中可以实现旋转效果的属性是什么

css的display属性有哪些

css transform-origin属性怎么用

css怎么移动文字

关于css中清除浮动(clearfix)的介绍

css不起作用的原因是什么

css的含义是什么

css实现一个简单的扁平化按钮

css边框显示不出来怎么办

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...