1200字范文 > [CSS] 用css实现气泡框效果

[CSS] 用css实现气泡框效果

时间：2022-05-07 06:55:09

相关推荐

[CSS] 用css实现气泡框效果

1、用css实现气泡框效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用css实现气泡框效果</title><style>.example{background-color: green;color: white;display: inline-block;padding: 0 .7em;height: 2em;line-height: 2em;border-radius: 10px;position: relative;}.example::before{position: absolute;content: '';height: 0;width: 0;right: 10px;top: 1.5em;border-width: 1em;border-style: solid;border-color: green transparent transparent transparent;}</style></head><body><div class="example">Hello CSS!</div></body></html>

组成：一个圆角div+伪类::before倒三角

2、用css实现0.5px大小的线条

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用css实现0.5px大小的线条</title><style>.example1, .example2{width: 300px;height: 200px;}.example1{border: 1px solid black;}.example2{position: relative;margin-top: 10px;}.example2::before{content: '';position: absolute;width: 600px;height: 400px;border: 1px solid black;top: 0;left: 0;transform-origin: top left;transform: scale(.5);}</style></head><body><div style="font-size:40px">建议放大观察两者区别</div><div class="example1"></div><div class="example2"></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。