javascript - 使用 CSS 和 JQUERY 实现 CSS 边框半径

标签 javascript html jquery css

我想选择用jquery指定的部分并应用“边框半径”。

但我无法使用 Jquery 选择器实现这一点。

或者我怎样才能用 CSS 做到这一点？

我不想通过手动向 HTML 代码添加“CLASS”来解决此问题。我想用一小段代码检测这些部分并自动采取行动。

期望结果: Desired result

我的代码: https://jsfiddle.net/gL3dwyu4/ 

    body{
        margin: 0;
        padding: 15px 0px;
        font-family: sans-serif;
        font-size: 15px;
    }

    #chat-messages-list .message-row{
        display: flex;
        word-wrap: break-word;
        margin-bottom: 2px;
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
    }
    #chat-messages-list .message-row:hover .message-time{
        opacity: 1;
    }
    #chat-messages-list .message-row .chat-avatar{
        display: block;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        flex-direction: column;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #eff0f1;
        background-size: cover;
    }

    #chat-messages-list .message-row .message-container{
        position: relative;
        padding: 6px 12px;
        box-sizing: border-box;
        word-break: break-word;
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
    }
    #chat-messages-list .message-row .message-time{
        display: flex;
        align-items: center;
        margin: 0 10px;
        font-size: 12px;
        color: var(--black-400);
        text-align: left;
        opacity: 0;
        transition: opacity 275ms;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #chat-messages-list .message-row.arrow {
        margin-top: 10px;
    }

    #chat-messages-list .message-row:not(.arrow) .message-sender,
    #chat-messages-list .message-row.me .message-sender,
    #chat-messages-list .message-row:not(.arrow) .chat-username,
    #chat-messages-list .message-row.me .chat-username {
        display: none;
    }


    #chat-messages-list .message-row.me{
        flex-direction: row-reverse;
    }
    #chat-messages-list .message-row.me .message-container {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        background-color: #f2720c;
        color: #fff;
    }
    #chat-messages-list .message-row.me.arrow .message-container {
        border-top-right-radius: 1.25rem;
    }
    #chat-messages-list .message-row.you{
        justify-content: flex-start;
    }
    #chat-messages-list .message-row.you .message-sender{
        cursor: pointer;
    }
    #chat-messages-list .message-row.you .message-container {
        background-color: #eff0f1;
        color: #0c0d0e;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        margin-left: 38px;
    }
    #chat-messages-list .message-row.you.arrow .message-container {
        border-top-left-radius: 1.25rem;
        margin-left: 10px;
    }


    #chat-messages-list .message-row.you.arrow .message-container .chat-username {
        cursor: pointer;
        font-size: 16px;
        margin-bottom: 5px;
        font-weight: 600;
        color: #0c0d0e;
    }
    #chat-messages-list .message-row.you .message-time{
        text-align: right;
    }
<div id="chat-messages-list">
    <div class="message-row me arrow" data-messageid="1" data-senderid="1001">
        <div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">seyit55</div>
            <div class="chat-message">Hello!</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row me" data-messageid="2" data-senderid="1001">
        <div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">seyit55</div>
            <div class="chat-message">How Are you ?</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you arrow" data-messageid="3" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">Hello :)</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you arrow" data-messageid="4" data-senderid="1015">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">alex</div>
            <div class="chat-message">Hello!</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you arrow" data-messageid="5" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">What are you doing ?</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you" data-messageid="6" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">Are you there ?</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    <div class="message-row you" data-messageid="7" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">What is your name ?</div>
        </div>
        <div class="message-time">17:01</div>
    </div>
    <div class="message-row me arrow" data-messageid="8" data-senderid="1001">
        <div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">seyit55</div>
            <div class="chat-message">Can you help me ?</div>
        </div>
        <div class="message-time">17:01</div>
    </div>
    <div class="message-row you arrow" data-messageid="9" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">Yes</div>
        </div>
        <div class="message-time">17:01</div>
    </div>
    <div class="message-row you arrow" data-messageid="10" data-senderid="1015">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">alex</div>
            <div class="chat-message">Ok:)</div>
        </div>
        <div class="message-time">17:01</div>
    </div>
    <div class="message-row you arrow" data-messageid="11" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">okay!</div>
        </div>
        <div class="message-time">17:01</div>
    </div>
    <div class="message-row you" data-messageid="12" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">OK!</div>
        </div>
        <div class="message-time">17:02</div>
    </div>
    <div class="message-row you" data-messageid="13" data-senderid="1012">
        <div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username" >jackertools</div>
            <div class="chat-message">Ok!</div>
        </div>
    </div>
</div>

最佳答案

将半径应用于所有元素，然后使用伪元素隐藏不需要的元素。

相关代码如下:

#chat-messages-list .message-row.me .message-container {
  border-bottom-right-radius: 1.25rem;
}
#chat-messages-list .message-row.me:not(.arrow) .message-container::before {
    content: "";
    position: absolute;
    z-index:-1;
    bottom: calc(100% + 2px);
    right: 0;
    width: 1rem;
    height: 1rem;
    background: inherit; /* put a random color here to see the trick */
}

you 元素的逻辑相同

完整代码

body {
  margin: 0;
  padding: 15px 0px;
  font-family: sans-serif;
  font-size: 15px;
}

#chat-messages-list .message-row {
  display: flex;
  word-wrap: break-word;
  margin-bottom: 2px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

#chat-messages-list .message-row:hover .message-time {
  opacity: 1;
}

#chat-messages-list .message-row .chat-avatar {
  display: block;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  flex-direction: column;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #eff0f1;
  background-size: cover;
}

#chat-messages-list .message-row .message-container {
  position: relative;
  padding: 6px 12px;
  box-sizing: border-box;
  word-break: break-word;
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

#chat-messages-list .message-row .message-time {
  display: flex;
  align-items: center;
  margin: 0 10px;
  font-size: 12px;
  color: var(--black-400);
  text-align: left;
  opacity: 0;
  transition: opacity 275ms;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#chat-messages-list .message-row.arrow {
  margin-top: 10px;
}

#chat-messages-list .message-row:not(.arrow) .message-sender,
#chat-messages-list .message-row.me .message-sender,
#chat-messages-list .message-row:not(.arrow) .chat-username,
#chat-messages-list .message-row.me .chat-username {
  display: none;
}

#chat-messages-list .message-row.me {
  flex-direction: row-reverse;
}

#chat-messages-list .message-row.me .message-container {
  border-bottom-right-radius: 1.25rem;
  border-top-right-radius: 0;
  background-color: #f2720c;
  color: #fff;
}
#chat-messages-list .message-row.me:not(.arrow) .message-container::before {
    content: "";
    position: absolute;
    z-index:-1;
    bottom: calc(100% + 2px);
    right: 0;
    width: 1rem;
    height: 1rem;
    background: inherit;
}

#chat-messages-list .message-row.me.arrow .message-container {
  border-top-right-radius: 1.25rem;
}

#chat-messages-list .message-row.you {
  justify-content: flex-start;
}

#chat-messages-list .message-row.you .message-sender {
  cursor: pointer;
}

#chat-messages-list .message-row.you .message-container {
  background-color: #eff0f1;
  color: #0c0d0e;
  border-bottom-left-radius: 1.25rem;
  border-top-left-radius: 0;
  margin-left: 38px;
}

#chat-messages-list .message-row.you:not(.arrow) .message-container::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    z-index:-1;
    left: 0;
    width: 1rem;
    height: 1rem;
    background: inherit;
}

#chat-messages-list .message-row.you.arrow .message-container {
  border-top-left-radius: 1.25rem;
  margin-left: 10px;
}

#chat-messages-list .message-row.you.arrow .message-container .chat-username {
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #0c0d0e;
}

#chat-messages-list .message-row.you .message-time {
  text-align: right;
}

.you .message-container {
  border-bottom-left-radius:10px;
}
<div id="chat-messages-list">
  <div class="message-row me arrow" data-messageid="1" data-senderid="1001">
    <div class="message-sender" onclick="_chatUserDetails(1001)">
      <div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">seyit55</div>
      <div class="chat-message">Hello!</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  <div class="message-row me" data-messageid="2" data-senderid="1001">
    <div class="message-sender" onclick="_chatUserDetails(1001)">
      <div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">seyit55</div>
      <div class="chat-message">How Are you ?</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  <div class="message-row you arrow" data-messageid="3" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">Hello :)</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  <div class="message-row you arrow" data-messageid="4" data-senderid="1015">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">alex</div>
      <div class="chat-message">Hello!</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  <div class="message-row you arrow" data-messageid="5" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">What are you doing ?</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  <div class="message-row you" data-messageid="6" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">Are you there ?</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  <div class="message-row you" data-messageid="7" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">What is your name ?</div>
    </div>
    <div class="message-time">17:01</div>
  </div>
  <div class="message-row me arrow" data-messageid="8" data-senderid="1001">
    <div class="message-sender" onclick="_chatUserDetails(1001)">
      <div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">seyit55</div>
      <div class="chat-message">Can you help me ?</div>
    </div>
    <div class="message-time">17:01</div>
  </div>
  <div class="message-row you arrow" data-messageid="9" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">Yes</div>
    </div>
    <div class="message-time">17:01</div>
  </div>
  <div class="message-row you arrow" data-messageid="10" data-senderid="1015">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">alex</div>
      <div class="chat-message">Ok:)</div>
    </div>
    <div class="message-time">17:01</div>
  </div>
  <div class="message-row you arrow" data-messageid="11" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">okay!</div>
    </div>
    <div class="message-time">17:01</div>
  </div>
  <div class="message-row you" data-messageid="12" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">OK!</div>
    </div>
    <div class="message-time">17:02</div>
  </div>
  <div class="message-row you" data-messageid="13" data-senderid="1012">
    <div class="message-sender">
      <div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">jackertools</div>
      <div class="chat-message">Ok!</div>
    </div>
  </div>
</div>

关于javascript - 使用 CSS 和 JQUERY 实现 CSS 边框半径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65370819/

上一篇：java - 为什么会出现这种情况下拆箱的情况呢？

下一篇：apache - htaccess 重定向查询字符串，但已编码？到 ＆

相关文章：

javascript - Base64 pdf 缓存不会显示

javascript - 从 JSFiddle 发出复制代码

javascript - 在 html 中使用 jquery/javascript/css 进行表过滤、排序、不同记录

javascript - 如何使用jquery为DOM准​​备好后添加的对象分配属性或函数

javascript - 重装驱动后打印机打印垃圾

javascript - 为什么 V8 和 spidermonkey 似乎都没有展开静态循环？

javascript - 如何在 iframe 中运行由 Angular 制作的 chrome 扩展

javascript - Bootstrap Modal 在页面加载时触发，每个用户一次

html - 仅当高度超过 300px 时才对元素应用边框

jquery ajax 单击时调用，仅有效一次

©2024 IT工具网  联系我们