CSS에서 외곽선과 테두리의 차이점 분석
- 黄舟원래의
- 2017-07-27 09:21:083654검색
테두리 및 윤곽선:
테두리 속성:
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="img/mm1.jpg"></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!