CSS에서 외곽선과 테두리의 차이점 분석

黄舟

풀어 주다： 2017-07-27 09:21:08

원래의

3709명이 탐색했습니다.

테두리 및 윤곽선:

테두리 속성:

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-radius 1像素的左右了吧，扩展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픽셀이 됩니다. 🎜🎜

🎜그러나 육안으로 볼 수는 없지만 위의 방법은 실제로 이미지가 순수한 권리가 아니기 때문에 결함이 있습니다. 각도가 있지만 모서리가 1픽셀입니다. 완벽한 내부 정사각형 및 외부 원 효과를 얻으려면 태그 레이어를 설정하고 외부 태그에 border-radius 및 box-shadow를 사용할 수 있습니다. 🎜🎜

위 내용은 CSS에서 외곽선과 테두리의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!