在Web开发中,我们经常要使用CSS来实现不同的效果。今天我们来看一下,如何使用CSS来仿微信红包的样式。
.red-envelope-wrapper { display: inline-block; background-color: #FE5F5F; border-radius: 20px; padding: 5px 20px; font-size: 16px; font-weight: bold; color: #fff; cursor: pointer; } .red-envelope-wrapper:hover { background-color: #FF726E; } .red-envelope-curve { position: relative; display: inline-block; width: 20px; height: 20px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #FE5F5F; border-radius: 0 0 40px 40px; top: -10px; left: 5px; } .red-envelope-point { position: absolute; display: inline-block; width: 8px; height: 8px; background-color: #FE5F5F; border-radius: 50%; top: 12px; left: -4px; }
如上面的CSS代码所示,我们通过设置红包外部div的样式,来达到仿微信红包的效果。使用border-radius属性来设置圆角,padding属性来设置边距,以及cursor属性来设置当鼠标悬浮在红包上时的样式。
除了外部div以外,我们还需要设置红包角和点的样式。通过设置border属性来实现三角形,再通过设置位置属性来让三角形指向红包。点的样式可以通过设置position和border-radius属性来实现。
通过以上样式设置,我们就可以轻松地实现仿微信红包的样式了。