jquery– 带边框半径的多线圆角

概述我试图给出一个带有边框半径背景的跨度.没有自动换行就可以正常工作.但是当有自动换行时,它看起来像这样：你可以猜到,我只需要将边缘弄圆(除了左上边缘).我不认为我可以使用border-radius属性来做这件事,我不知道怎么能这样做.任何的想法 ？谢谢.编辑：代码.messageTextCont { margin-left: 5px; word-bre

我试图给出一个带有边框半径背景的跨度.没有自动换行就可以正常工作.但是当有自动换行时,它看起来像这样：

你可以猜到,我只需要将边缘弄圆(除了左上边缘).我不认为我可以使用border-radius属性来做这件事,我不知道怎么能这样做.

任何的想法 ？
谢谢.

编辑：代码

.messageTextCont {  margin-left: 5px;  word-break: break-word;}.messageText {  Font-size: 17px;  Font-weight: 300;  color: #FBFDFE;  background-color: #402060;  padding: 0px;  Box-shadow: 5px 0 0 #402060,-5px 0 0 #402060;  line-height: 23px;  -moz-border-bottom-left-radius: 5px;  -webkit-border-bottom-left-radius: 5px;  border-bottom-left-radius: 5px;  -moz-border-bottom-right-radius: 5px;  -webkit-border-bottom-right-radius: 5px;  border-bottom-right-radius: 5px;  -moz-border-top-right-radius: 5px;  -webkit-border-top-right-radius: 5px;  border-top-right-radius: 5px;}

edit2：我对Js解决方案也很好

编辑3：通过包括这个我接近我想要的东西：

-webkit-Box-decoration-break: clone;-o-Box-decoration-break: clone;Box-decoration-break: clone;

它的作用是,它克隆第一行的样式,并在分词的情况下将它们应用于第二行.但问题如下：

现在它完全克隆了第一行的属性并将它们应用到第二行,使得左上角和右上角也是圆形的,它们不应该是圆形的.为了弥补这一点,我让线条重叠一点,我得到了结果,但现在一些字母也重叠了.如果我找到重叠字母问题的解决方案而不是这个问题,问题就解决了.

edit4：我使用了框阴影：

Box-shadow: 5px 0 0 #402060,-5px 0 0 #402061,-5px -3px 0 orange,5px -3px red;

掩盖不必要的差距.现在的结果是这样的：

我现在唯一的问题是下面的线与上面的线重叠.如果上线与底线重叠,那么问题就解决了.

最佳答案[已解决]：我的解决方案如下：

.messageText {  Font-size: 17px;  Font-weight: 300;  color: #FBFDFE;  background-color: #402060;  padding: 0px;  Box-shadow: 5px 0 0 #402060,5px 5px 0 #402060,-5px 5px #402060;  line-height: 23px;  -moz-border-bottom-left-radius: 5px;  -webkit-border-bottom-left-radius: 5px;  border-bottom-left-radius: 5px;  -moz-border-bottom-right-radius: 5px;  -webkit-border-bottom-right-radius: 5px;  border-bottom-right-radius: 5px;  -moz-border-top-right-radius: 5px;  -webkit-border-top-right-radius: 5px;  border-top-right-radius: 5px;  -webkit-Box-decoration-break: clone;  -o-Box-decoration-break: clone;  Box-decoration-break: clone;}

这是Jsfiddle：

http://jsfiddle.net/vpo2x84s/3/ 总结

以上是内存溢出为你收集整理的jquery – 带边框半径的多线圆角全部内容，希望文章能够帮你解决jquery – 带边框半径的多线圆角所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。