CSS 및 JQUERY로 CSS 테두리 반경 구현
Morgan 코드
jquery로 지정된 부분을 선택하고 "테두리 반경"을 적용하고 싶습니다.
그러나 Jquery 선택기로 이것을 달성 할 수 없었습니다.
아니면 CSS로 어떻게 할 수 있습니까?
HTML 코드에 수동으로 "CLASS"를 추가하여이 문제를 해결하고 싶지 않습니다. 작은 코드로 이러한 부분을 감지하고 자동으로 조치를 취하고 싶습니다.
원하는 결과 : 
내 코드 : 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> Afif 동반
필요하지 않은 요소를 숨기는 유사 요소를 사용하여 반경을 모두 적용합니다.
다음은 관련 코드입니다.
#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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
- 이전 게시물：Why does my C++ function, only when it's placed after main(), not work?
- 다음 포스트：Extracting Images from Word Documents Using Python docx2txt
관련 기사
Related 관련 기사
- 1
CSS : IE의 여러 bgs, bg 클립 및 테두리 반경
- 2
css로 볼록한 테두리 상단 및 테두리 하단?
- 3
곡선 테두리 CSS 구현
- 4
테이블에서 충돌하는 테두리 및 테두리 반경 CSS 스타일
- 5
CSS 테두리 반경 : 20px
- 6
CSS 테두리 반경 클립 색상
- 7
특정 테두리 반경 CSS
- 8
CSS 테두리 반경 변조
- 9
css3 테두리 반경으로 사다리꼴 만들기
- 10
jquery-CSS 속성 변경 및 반복
- 11
Ember.js의 CSS 테두리 및 이상한 요소 경계
- 12
jQuery의 현재 셀 값을 기반으로 이전 테이블 셀의 CSS 스타일 및 링크를 변경하는 방법
- 13
Android 4 이상 및 iOS 6.0에서 테두리 반경으로 구부러지지 않는 테두리
- 14
전환이 1 초인 호버 및 호버 아웃시 CSS 테두리 반경 설정
- 15
CSS의 테두리 반경과 배경색 충돌
- 16
CSS : 클립 경로 : 다각형-둥근 테두리
- 17
HTML 또는 CSS로 TD 테두리 색상 변경
- 18
모든 테두리 반경으로 CSS 페타 곤을 그리는 방법은 무엇입니까?
- 19
CSS 변환 중 테두리 반경이 작동하지 않음
- 20
메모장 ++ : 내 CSS에서 모든 테두리 반경 제거
- 21
테두리 반경 CSS 컬을 추가하는 방법
- 22
테두리 반경 속성을 제거하는 CSS 전환
- 23
CSS 그라디언트-음의 테두리 반경
- 24
CSS. Li 테두리 길이 변경
- 25
HTML 및 CSS로 테두리 중간에 제목을 어떻게 얻습니까?
- 26
CSS에서 테두리 상단 그림자 및 삼각형 아래로
- 27
CSS 내부 div 테두리 반경을 외부 div 테두리 반경과 정렬하는 방법
- 28
CSS의 세로 탭 테두리 문제
- 29
CSS로 여러 테두리 색상
몇 마디 만하겠습니다