테두리 및 윤곽선:
테두리 속성:
border-width, border-style, border-color 여기서 테두리 스타일은 없거나 숨길 수 있습니다.
outline(윤곽선)
가장자리에 요소 테두리 윤곽선 색상, 윤곽선 스타일 및 윤곽선 너비의 세 가지 하위 속성 설정을 포함하여 요소 주위에 선을 그립니다. 이러한 속성은 기본값으로 설정될 수 있으며 고정된 순서가 없습니다. 윤곽선은 페이지 공간을 차지하지 않으며 직사각형일 필요도 없습니다.
IE 이외의 브라우저에서는 아웃라인을 직접 지원합니다. !DOCUMENT를 지정하는 IE8 이상의 브라우저만 개요를 지원합니다.
outline-style은 없음일 수 있습니다(hidden 속성을 포함하지 않음)
요약: 둘 사이의 차이점은 다음과 같습니다.
1.Outline은 공간을 차지하지 않으며 너비나 높이를 추가하지 않습니다. .(브라우저가 렌더링될 때 리플로우나 다시 그리기가 발생하지 않습니다.)
2.outline은 직사각형이 아닐 수 있습니다(Firefox 브라우저에서).
FireFox 브라우저에는 outline이 있습니다. 둥근 모서리outline-radiusoutline匹对的圆角夫妻outline-radius
示例：
使用outline实现下图效果
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>直角三角形（右下角）</title>
<style type="text/css">
.use-outline-offset{
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
border:40px solid #000000;
background-color:#cccccc;
outline-width:40px;
outline-style:dotted;
outline-offset:-80px;
box-sizing: border-box;
}
</style></head><body><p class="use-outline-offset"></p></body></html>效果图：
box-shadow模拟outline的圆角效果
outline-radius虽然没戏了，但是，我们可以使用其他属性，可以实现类似的效果，比方说，图形构建大神之一的box-shadow.
我们平时使用box-shadow最多的是前面3个参数，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4个可选参数值究竟有何用？box-shadow第4个参数值，名外扩展，可以把投影范围扩大，当然，扩大的区域是实色区域。我们就可以利用这一特性，模拟实现不影响元素占据尺寸的outline实色边框效果啦！
实例先行，代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>圆角</title>
<style type="text/css">
.outline-radius {
margin: 200px auto;
width: 400px;
height: 300px;
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
.outline-radius>img{
width: 100%;
height: 100%;
}
</style></head><body><p class="outline-radius">
<img src="/static/imghwm/default1.png" data-src="img/mm1.jpg" class="lazy" alt="CSS에서 외곽선과 테두리의 차이점 분석" ></p></body></html>
效果图如下：
下面简单解释下两行CSS代码的含义：
border-radius: 1px表示圆角大小1像素。有同学可能奇怪了，怎么是1像素啊，截图圆角明明好几十像素，下面正好就解释了；-
box-shadow: 0 0 0 30px #cd0000出现了4个数值，分别是水平偏移0, 垂直偏移0，模糊0(纯色), 扩展大小30像素。我们可以想象成，光线直接从盒子的正上方照下来，因为没有偏移没有模糊，我们看不到任何阴影。实际上，盒子的阴影正好就是盒子的大小（外带1像素圆角），此时，扩展30像素，我们可以脑补一下，1像素圆角的阴影再扩展30像素。哟，不就是我们需要的效果嘛，不就是截图展示的效果嘛！知道
border-radius1像素的左右了吧，扩展30像素后，圆角就是30像素大小了。
然而，虽然肉眼看不出来，上面的方法实际有瑕疵，因为图片不是纯正的直角，有1像素的圆角。如果你想实现完美的内方外圆的效果，可以套一层标签，外面的标签使用border-radius和box-shadow
🎜🎜🎜rrreee
렌더링:
🎜
🎜🎜 🎜box-shadow는 윤곽선의 둥근 모서리 효과를 시뮬레이션합니다
🎜outline- radius는 사라졌지만 비슷한 효과를 얻기 위해 다른 속성을 사용할 수 있습니다(예: 그래픽 구성의 대가 중 하나인 box-shadow).🎜 🎜우리는 일반적으로 box를 사용합니다. -shadow는 처음 세 매개변수인 수평/수직 오프셋과 흐림 크기에 가장 많이 사용됩니다. 일부 친구들은 네 번째 선택적 매개변수의 값이 무엇인지 모를 수도 있습니다. box-shadow의 네 번째 매개변수 값은 이름 밖의 확장으로, 투영 범위를 확장할 수 있습니다. 물론 확장된 영역은 단색 영역입니다. 이 기능을 사용하여 요소의 크기에 영향을 주지 않는 윤곽선 단색 테두리 효과를 시뮬레이션할 수 있습니다! 🎜🎜예제가 먼저 나오고 코드는 다음과 같습니다. 🎜🎜🎜rrreee🎜 🎜
렌더링은 다음과 같습니다.
🎜
🎜🎜다음은 간략한 설명입니다. CSS 코드의 다음 두 줄의 의미: 🎜🎜border-radius: 1px 는 둥근 모서리 크기가 1픽셀임을 의미합니다. 일부 학생들은 놀랄 수도 있습니다. 왜 1픽셀인가요? 스크린샷의 둥근 모서리는 분명히 수십 픽셀입니다. 이에 대해서는 아래에 설명되어 있습니다. "> box-shadow: 0 0 0 30px #cd0000 가로 오프셋 0, 세로 오프셋 0, 흐림 0(단색), 확장 크기 30픽셀 등 4가지 값이 표시됩니다. . 오프셋이나 흐림이 없고 그림자도 볼 수 없기 때문에 빛이 상자 위에서 직접 빛난다고 상상할 수 있습니다. 실제로 상자의 그림자는 상자의 크기와 정확히 같습니다(1픽셀 둥근 모서리 포함). 이때 1픽셀 둥근 모서리의 그림자는 30픽셀로 확장됩니다. 30픽셀을 추가로 확장합니다. 아, 우리가 원하는 효과가 바로 스크린샷에 보이는 효과 아닌가요? 🎜🎜🎜border-radius가 약 1픽셀인 것을 아시다시피 30픽셀로 확장하면 둥근 모서리의 크기가 30픽셀이 됩니다. 🎜🎜
border-radius 및 box-shadow를 사용할 수 있습니다. 🎜🎜위 내용은 CSS에서 외곽선과 테두리의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
커서를위한 다음 레벨 CSS 스타일Apr 23, 2025 am 11:04 AMCSS가있는 커스텀 커서는 훌륭하지만 JavaScript를 사용하여 다음 단계로 가져갈 수 있습니다. JavaScript를 사용하면 커서 상태를 전환하고 커서 내에 동적 텍스트를 배치하고 복잡한 애니메이션을 적용하며 필터를 적용 할 수 있습니다.
Worlds Collide : 스타일 쿼리를 사용한 KeyFrame Collision DetectionApr 23, 2025 am 10:42 AM2025 년에 서로를 ricocheting하는 요소가있는 대화식 CSS 애니메이션은 CSS에서 Pong을 구현할 필요가 없지만 CSS의 유연성과 힘이 증가하는 것은 LEE의 의심을 강화합니다.
UI 효과를 위해 CSS 배경 필터 사용Apr 23, 2025 am 10:20 AMCSS 배경 필터 속성을 사용하여 사용자 인터페이스 스타일에 대한 팁과 요령. 여러 요소들 사이에 필터를 배경으로 배경으로 배경으로하는 방법을 배우고 다른 CSS 그래픽 효과와 통합하여 정교한 디자인을 만듭니다.
미소?Apr 23, 2025 am 09:57 AM글쎄, SVG '의 내장 애니메이션 기능은 계획대로 이상 사용되지 않았다. 물론 CSS와 JavaScript는 부하를 운반 할 수있는 것 이상이지만 Smil이 이전과 같이 물에서 죽지 않았다는 것을 아는 것이 좋습니다.
'예쁜'은 보는 사람의 눈에 있습니다Apr 23, 2025 am 09:40 AM예, 텍스트-랩을위한 점프 : Safari Technology Preview의 예쁜 착륙! 그러나 Chromium 브라우저에서 작동하는 방식과는 다른 점을 조심하십시오.
CSS- 트릭 연대기 XLIIIApr 23, 2025 am 09:35 AM이 CSS- 트릭 업데이트는 Almanac, 최근 Podcast 출연, 새로운 CSS 카운터 가이드 및 귀중한 컨텐츠에 기여하는 몇 가지 새로운 저자의 추가 진전을 강조합니다.
Tailwind ' s @apply 기능은 소리보다 낫습니다Apr 23, 2025 am 09:23 AM대부분의 경우 사람들은 Tailwind ' S 단일 프로퍼 유틸리티 중 하나 (단일 CSS 선언을 변경)와 함께 Tailwind ' s @apply 기능을 보여줍니다. 이런 식으로 선보일 때 @apply는 전혀 약속하는 소리가 들리지 않습니다. 그래서 Obvio
릴리스가없는 느낌 : 제정신 배치를 향한 여정Apr 23, 2025 am 09:19 AM바보처럼 배포하는 것은 배포하는 데 사용하는 도구와 복잡성에 대한 보상과 복잡성이 추가됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
