纯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 outline属性怎么用?

css中清除浮动有哪几种方式

css中怎么把ul居中

html+css实现网页滑动门效果实例分享

值得收藏的26个css面试题,增强你的css基础!

什么是css预处理器

css如何实现水平居中

如何删除css

css如何设置图层在最上面

html中hr怎么设置粗细

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




打赏

取消

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

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

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

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

评论

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