CSS中的大写下划线 [英] Round cap underline in CSS

问题描述

您可以使用CSS在圆角下划线吗(如上图所示)?怎么样?

Can you make round cap underlines (as in the above image) with CSS? How?

有没有一种方法可以使用 border-bottom ? border-radius 会产生这种时尚的效果:

Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:

推荐答案

我误解了hpique讨厌什么，但这应该可以:

I missunderstood what hpique wated, but this should work:

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 55px 0 0 #000;
  font-family: sans-serif;
}

<div id="test">Hello world</div>

基本上，我将文本放在div上，框阴影的大小将与该div设置的 height 和 width 相同，使用 height / width ，您应该得到想要的...

Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...

JSBin演示

演示中的屏幕截图:

这篇关于CSS中的大写下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！