윤곽 반지름?
테두리 모서리를 둥글게 하는 방법은 없습니까?div와 요소, 「」border-radius
에는 반올림된 입니다.border포커스 아웃라인의 색상을 변경하려고 했습니다.입력 제어 장치에 끔찍한 사각 윤곽을 길들일 수 없었다.
대신 래래대 so so so so so so so so so so so so so 。box-shadow저는 사실 섀도의 부드러운 외관을 선호합니다만, 섀도를 딱딱하게 만들어 둥근 윤곽을 재현할 수 있습니다.
input, input:focus {
border: none;
border-radius: 2pt;
box-shadow: 0 0 0 1pt grey;
outline: none;
transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
box-shadow: 0 0 3pt 2pt cornflowerblue;
}
/* Hard "outline" with box-shadow: */
.text2:focus {
box-shadow: 0 0 0 2pt red;
}<input class="text1">
<br>
<br>
<input type=text class="text2">이것은 보통 :after 의사 요소를 사용하여 실행합니다.
물론 용도에 따라 다르겠지만, 이 방법은 하드 섀도우 방식을 사용하는 대신 개별 경계를 제어할 수 있습니다.
또한 -1px 간격띄우기를 설정하고 배경 선형 그라데이션(경계 없음)을 사용하여 다시 한 번 다른 효과를 얻을 수 있습니다.
body {
margin: 20px;
}
a {
background: #999;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
color: #fff;
position: relative;
border: 2px solid #000;
}
a:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}<a href="#">Button</a>위의 Lea Hayes와 비슷하지만, 제가 한 방법은 다음과 같습니다.
div {
background: #999;
height: 100px;
width: 200px;
border: #999 solid 1px;
border-radius: 10px;
margin: 15px;
box-shadow: 0px 0px 0px 1px #fff inset;
}<div></div>DIV나 jQuery를 네스트할 필요는 없습니다.간단히 하기 위해 Altho는 CSS의 -moz와 -webkit의 배리언트를 생략하고 있습니다.위의 결과를 볼 수 있습니다.
쓰세요.box-shadow: 0px 0px 0px 1px red;
저는 Bootstrap 네비게이션 바의 드롭다운 메뉴에 대한 멋진 포커스 접근성을 원했고, 매우 만족스러웠습니다.
a.dropdown-toggle:focus {
display: inline-block;
box-shadow: 0 0 0 2px #88b8ff;
border-radius: 2px;
}<a href="https://stackoverflow.com" class="dropdown-toggle">Visit Stackoverflow</a>세팅함으로써 우리의 소망이 곧 사라지는 것을 볼 수 있을 것이다.outline-style: autoWebKits 레이더에 게재되어 있습니다.http://trac.webkit.org/changeset/198062/webkit
2030년에 만나요.
당신은 이런 걸 찾고 있는 것 같아요.
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
편집
파이어폭스 이 -moz-outline-radiusIE/Chrome/Safari/Opera 등에서는 동작하지 않습니다.따라서 테두리 주위에 곡선을 그리는 가장 크로스 브라우저 호환성이* 높은 방법은 wrapper div를 사용하는 것 같습니다.
div.inner {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
div.outer {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid red;
}<div class="outer">
<div class="inner"></div>
</div>*이미지 사용 외에
파이어폭스 88+: 보더 반지름
2021년 4월부터 Firefox용 간단한 CSS를 사용할 수 있게 됩니다.
.actual {
outline: solid red;
border-radius: 10px;
}
.expected {
border: solid red;
border-radius: 10px;
}In Firefox 88+,
<span class="actual">this outline</span>
should look like
<span class="expected">this border</span> Firefox 86.0다음 중 하나:
Webkit: 솔루션 없음
「」를 사용합니다.outline-style: auto、 「 outline stylehttpsdeveloper.mozilla.org/en-US/docs/Web/CSS/)를해 주세요.
하면, 「보다 낫다」를 할 수 .outline-style: auto 요. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
.actual {
outline: auto red;
border-radius: 10px;
}
.expected {
border: solid red;
border-radius: 10px;
}In WebKit browsers (Chrome, Edge),
<span class="actual">this outline</span>
should look close to
<span class="expected">this border</span> Chrome 89.0:
상세 정보
파이어폭스 88(2021년 4월 20일 출시)부터 윤곽은 테두리 반지름 모양을 따릅니다.
의 ★★★-moz-outline-radius용장화 되어 삭제됩니다.
Firefox 88 이후 표준 아웃라인 속성은 border-radius 모양을 따르며 -moz-outline-radius 속성을 용장화합니다.따라서 이 속성은 제거됩니다.
(2023년 3월)
Outline radius는 Firefox와 Firefox for Android에서만 지원되는 것으로 알고 있습니다.
-moz-outline-radius: 1em;
저는 방금 이에 대한 좋은 해결책을 찾았는데, 지금까지의 모든 반응을 살펴본 결과, 아직 게시된 것을 보지 못했습니다.그래서 제가 한 일은 다음과 같습니다.
클래스에 CSS 규칙을 만들고 해당 규칙에 :focus 유사 클래스를 사용했습니다.팅세 set set set set set 했습니다.outline: noneChrome이 기본적으로 사용하는 기본 라이트 블루 비보더 반지름 가능 '아웃라인'을 제거합니다. 럼 에서 은은 then then then then then then:focus이은 존재하지 않게 .pseudo-class pseudo-class, pseudo-class, 했습니다.이치노 해서 다음과 .
outline: none;
border-radius: 5px;
border: 2px solid maroon;
사용자가 요소를 탭으로 선택했을 때 나타나는 테두리 반지름과 함께 갈색 윤곽선을 만듭니다.
엠보싱 룩을 원하는 경우 다음과 같은 작업을 수행할 수 있습니다.
.embossed {
background: #e5e5e5;
height: 100px;
width: 200px;
border: #FFFFFF solid 1px;
outline: #d0d0d0 solid 1px;
margin: 15px;
}
.border-radius {
border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
}
.outline-radius {
-moz-outline-radius: 21px;
}<div class="embossed"></div>
<div class="embossed border-radius"></div>
<div class="embossed border-radius outline-radius">-MOZ ONLY</div>다른 브라우저에서는 이 작업을 할 수 있는 작업을 찾지 못했습니다.
편집: 다른 방법은 상자 그림자를 사용하는 것뿐입니다만, 그 요소에 상자 그림자가 이미 있는 경우 이 방법은 작동하지 않습니다.
크롬 94.0+
I tested it in chrome 94.0 and it seems that the outline property honors the border-radius now.
.outline {
outline: 2px solid red;
}
.border {
border: 2px solid red;
}
.outline-10 {
border-radius: 10px;
}
.border-2 {
border-radius: 2px;
}
.outline-2 {
border-radius: 2px;
}
.border-10 {
border-radius: 10px;
}
.outline-50 {
border-radius: 50%;
}
.border-50 {
border-radius: 50%;
}
.circle {
display: inline-block;
width:50px;
height: 50px;
}<strong>Test this in chrome 94.0+</strong>
<br/><br/>
border-radius: 2px
<span class="outline outline-2">outline</span>
<span class="border border-2">border</span>
<br/><br/>
border-radius: 10px
<span class="outline outline-10">outline</span>
<span class="border border-10">border</span>
<br/><br/>
border-radius: 50%
<span class="outline outline-50">outline</span>
<span class="border border-50">border</span>
<span class="outline circle outline-50">outline</span>
<span class="border circle border-50">border</span>다른 사용자가 말했듯이 파이어폭스만 이를 지원합니다.여기에도 같은 작업을 하는 작업이 있습니다.또한 점선으로도 작업합니다.
.has-outline {
display: inline-block;
background: #51ab9f;
border-radius: 10px;
padding: 5px;
position: relative;
}
.has-outline:after {
border-radius: 10px;
padding: 5px;
border: 2px dashed #9dd5cf;
position: absolute;
content: '';
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;
}<div class="has-outline">
I can haz outline
</div>아니요. 테두리는 요소의 외부와 상자 모델 여백 영역의 내부에 있습니다.요소의 내부에 윤곽이 표시되며 상자 모델 패딩 영역은 이를 무시합니다.그것은 미학을 위한 것이 아니다.디자이너에게 요소의 윤곽을 보여주기 위해서입니다.예를 들어 html 문서를 개발하는 초기 단계에서 개발자는 모든 골격 div를 올바른 위치에 배치했는지 빠르게 식별해야 할 수 있습니다.나중에 다양한 버튼과 폼이 서로 떨어져 있는 픽셀 수가 올바른지 확인해야 할 수 있습니다.
국경은 본질적으로 심미적이다.윤곽선과는 달리 실제로는 상자 모델에서 떨어져 있습니다. 즉, 여백 0으로 설정된 텍스트와 겹치지 않으며 테두리의 각 측면을 개별적으로 스타일링할 수 있습니다.
모서리 반경을 윤곽에 적용하려고 한다면 대부분의 사람들이 테두리를 사용하는 것처럼 사용하고 있을 겁니다.실례가 되지 않는다면 국경 너머에서 바람직한 윤곽은 무엇일까요?
박스 섀도우와 아웃라인의 조합.
Lea Hayes의 대답에 약간의 반전이 있었다.
input[type=text]:focus {
box-shadow: 0 0 0 1pt red;
outline-width: 1px;
outline-color: red;
}
깔끔하게 마무리할 수 있을 것 같아요.테두리 반지름 사용 시 얻을 수 있는 크기 증가 없음
테두리 없이 윤곽만 필요한 경우 해결책이 있습니다.을 사용하다부트스트랩의 css.「 」를 지정했을 outline: 1px auto certain_color 하면 어떤 에 얇은 됩니다이 경우 10px 너비를 지정하더라도 지정된 너비는 문제가 되지 않습니다.자동
둥근 모서리와 특정 너비의 윤곽선이 필요한 경우 필요한 너비와 동일한 색상의 테두리에 css 규칙을 추가할 수 있습니다.곽이이두두두두두
커스텀 라디오 버튼을 만들고 있었는데, 지금까지 발견한 가장 커스터마이즈 가능한 방법은 다음과 같은 유사 요소를 사용하는 것입니다: Codepen
/*CSS is compiled from SCSS*/
.product-colors {
margin-bottom: 1em;
display: flex;
align-items: center;
}
.product-colors label {
position: relative;
width: 2.1em;
height: 2.1em;
margin-right: 0.8em;
cursor: pointer;
}
.product-colors label:before {
opacity: 0;
width: inherit;
height: inherit;
padding: 2px;
border: 2px solid red;
border-radius: 0.2em;
content: "";
position: absolute;
z-index: 1;
background: transparent;
top: -4px;
left: -4px;
}
.product-colors input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.product-colors input:checked + label:before, .product-colors input:focus + label:before {
opacity: 1;
}<div class="product-colors">
<input type="radio" name="cs" id="cs1" value="black">
<label for="cs1" style="background:black"></label>
<input type="radio" name="cs" id="cs2" value="green">
<label for="cs2" style="background:green"></label>
<input type="radio" name="cs" id="cs3" value="blue">
<label for="cs3" style="background:blue"></label>
<input type="radio" name="cs" id="cs4" value="yellow">
<label for="cs4" style="background:yellow"></label>
</div>clip-path: circle(100px at center);
이렇게 하면 클릭 가능한 원만 만들어지지만 테두리 반지름은 여전히 정사각형을 만들지만 원처럼 보입니다.
기본적인 질문에 대한 간단한 대답은 "아니오"입니다.유일한 크로스 브라우저 옵션은 원하는 것을 실현하는 해킹을 작성하는 것입니다.이 접근방식은 기존 콘텐츠를 스타일링할 때 잠재적인 문제를 수반하지만 다른 솔루션보다 아웃라인(오프셋, 폭, 선 스타일)을 더 많이 커스터마이즈할 수 있습니다.
기본 수준에서 다음 정적 예를 검토합니다(데모를 위해 스니펫을 실행합니다).
.outline {
border: 2px dotted transparent;
border-radius: 5px;
display: inline-block;
padding: 2px;
margin: -4px;
}
/* :focus-within does not work in Edge or IE */
.outline:focus-within, .outline.edge {
border-color: blue;
}
br {
margin-bottom: 0.75rem;
}<h3>Javascript-Free Demo</h3>
<div class="outline edge"><input type="text" placeholder="I always have an outline"/></div><br><div class="outline"><input type="text" placeholder="I have an outline when focused"/></div> *<i>Doesn't work in Edge or IE</i><br><input type="text" placeholder="I have never have an outline" />
<p>Note that the outline does not increase the spacing between the outlined input and other elements around it. The margin (-4px) compensates for the space that the outlines padding (-2px) and width (2px) take up, a total of 4px.</p>좀 더 고급 수준에서 자바스크립트를 사용하여 특정 유형 또는 클래스의 요소를 부트스트랩하여 페이지 로드 시 아웃라인을 시뮬레이트하는 div 안에 래핑할 수 있습니다.또한 이벤트 바인딩은 다음과 같은 사용자 상호 작용의 개요를 표시하거나 숨기기 위해 확립될 수 있습니다(아래 스니펫을 실행하거나 JSFiddle에서 엽니다).
h3 {
margin: 0;
}
div {
box-sizing: border-box;
}
.flex {
display: flex;
}
.clickable {
cursor: pointer;
}
.box {
background: red;
border: 1px solid black;
border-radius: 10px;
height: 5rem;
display: flex;
align-items: center;
text-align: center;
color: white;
font-weight: bold;
padding: 0.5rem;
margin: 1rem;
}<h3>Javascript-Enabled Demo</h3>
<div class="flex">
<div class="box outline-me">I'm outlined because I contain<br>the "outline-me" class</div>
<div class="box clickable">Click me to toggle outline</div>
</div>
<hr>
<input type="text" placeholder="I'm outlined when focused" />
<script>
// Called on an element to wrap with an outline and passed a styleObject
// the styleObject can contain the following outline properties:
// style, width, color, offset, radius, bottomLeftRadius,
// bottomRightRadius, topLeftRadius, topRightRadius
// It then creates a new div with the properties specified and
// moves the calling element into the div
// The newly created wrapper div receives the class "simulated-outline"
Element.prototype.addOutline = function (styleObject, hideOutline = true) {
var element = this;
// create a div for simulating an outline
var outline = document.createElement('div');
// initialize css formatting
var css = 'display:inline-block;';
// transfer any element margin to the outline div
var margins = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
var marginPropertyNames = {
marginTop: 'margin-top',
marginBottom: 'margin-bottom',
marginLeft: 'margin-left',
marginRight: 'margin-right'
}
var outlineWidth = Number.parseInt(styleObject.width);
var outlineOffset = Number.parseInt(styleObject.offset);
for (var i = 0; i < margins.length; ++i) {
var computedMargin = Number.parseInt(getComputedStyle(element)[margins[i]]);
var margin = computedMargin - outlineWidth - outlineOffset;
css += marginPropertyNames[margins[i]] + ":" + margin + "px;";
}
element.style.cssText += 'margin:0px !important;';
// compute css border style for the outline div
var keys = Object.keys(styleObject);
for (var i = 0; i < keys.length; ++i) {
var key = keys[i];
var value = styleObject[key];
switch (key) {
case 'style':
var property = 'border-style';
break;
case 'width':
var property = 'border-width';
break;
case 'color':
var property = 'border-color';
break;
case 'offset':
var property = 'padding';
break;
case 'radius':
var property = 'border-radius';
break;
case 'bottomLeftRadius':
var property = 'border-bottom-left-radius';
break;
case 'bottomRightRadius':
var property = 'border-bottom-right-radius';
break;
case 'topLeftRadius':
var property = 'border-top-left-radius-style';
break;
case 'topRightRadius':
var property = 'border-top-right-radius';
break;
}
css += property + ":" + value + ';';
}
// apply the computed css to the outline div
outline.style.cssText = css;
// add a class in case we want to do something with elements
// receiving a simulated outline
outline.classList.add('simulated-outline');
// place the element inside the outline div
var parent = element.parentElement;
parent.insertBefore(outline, element);
outline.appendChild(element);
// determine whether outline should be hidden by default or not
if (hideOutline) element.hideOutline();
}
Element.prototype.showOutline = function () {
var element = this;
// get a reference to the outline element that wraps this element
var outline = element.getOutline();
// show the outline if one exists
if (outline) outline.classList.remove('hide-outline');
}
Element.prototype.hideOutline = function () {
var element = this;
// get a reference to the outline element that wraps this element
var outline = element.getOutline();
// hide the outline if one exists
if (outline) outline.classList.add('hide-outline');
}
// Determines if this element has an outline. If it does, it returns the outline
// element. If it doesn't have one, return null.
Element.prototype.getOutline = function() {
var element = this;
var parent = element.parentElement;
return (parent.classList.contains('simulated-outline')) ? parent : null;
}
// Determines the visiblity status of the outline, returning true if the outline is
// visible and false if it is not. If the element has no outline, null is returned.
Element.prototype.outlineStatus = function() {
var element = this;
var outline = element.getOutline();
if (outline === null) {
return null;
} else {
return !outline.classList.contains('hide-outline');
}
}
// this embeds a style element in the document head for handling outline visibility
var embeddedStyle = document.querySelector('#outline-styles');
if (!embeddedStyle) {
var style = document.createElement('style');
style.innerText = `
.simulated-outline.hide-outline {
border-color: transparent !important;
}
`;
document.head.append(style);
}
/*########################## example usage ##########################*/
// add outline to all elements with "outline-me" class
var outlineMeStyle = {
style: 'dashed',
width: '3px',
color: 'blue',
offset: '2px',
radius: '5px'
};
document.querySelectorAll('.outline-me').forEach((element)=>{
element.addOutline(outlineMeStyle, false);
});
// make clickable divs get outlines
var outlineStyle = {
style: 'double',
width: '4px',
offset: '3px',
color: 'red',
radius: '10px'
};
document.querySelectorAll('.clickable').forEach((element)=>{
element.addOutline(outlineStyle);
element.addEventListener('click', (evt)=>{
var element = evt.target;
(element.outlineStatus()) ? element.hideOutline() : element.showOutline();
});
});
// configure inputs to only have outline on focus
document.querySelectorAll('input').forEach((input)=>{
var outlineStyle = {
width: '2px',
offset: '2px',
color: 'black',
style: 'dotted',
radius: '10px'
}
input.addOutline(outlineStyle);
input.addEventListener('focus', (evt)=>{
var input = evt.target;
input.showOutline();
});
input.addEventListener('blur', (evt)=>{
var input = evt.target;
input.hideOutline();
});
});
</script>마지막으로, 이 접근방식을 구현하려면 데모에 포함시킨 것보다 더 많은 스타일링이 필요할 수 있습니다. 특히 이미 개요를 설명하고 싶은 요소를 스타일링한 경우에는 더욱 그렇습니다.
outline-style: auto는 오랜 기간 동안 완전한 브라우저를 지원했습니다.
줄임말:
outline: auto blue;
아쉽게도 커스텀 컬러를 설정할 수 있지만 커스텀 두께는 설정할 수 없습니다(브라우저의 디폴트 두께가 좋은 기본값이라고 생각합니다).
은 커스텀 아웃라인으로 .outline-style: auto.
outline: auto blue;
outline-offset: 0px;
이렇게 아웃라인 대신 박스테이프를 사용할 수 있습니다.
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
테두리 반지름만 설정해윤곽 반지름이 그 뒤에 나옵니다.
.item
{
outline: 2px solid blue;
border-radius: 15%;
}
테두리에 패딩과 배경색을 사용한 다음 윤곽선에 테두리를 사용합니다.
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
내 경우엔 통했어.
그냥 윤곽만 투명하게 해놨어요.
input[type=text] {
outline: rgba(0, 0, 0, 0);
border-radius: 10px;
}
input[type=text]:focus {
border-color: #0079ff;
}
난 이런 방식이 좋아.
.circle:before {
content: "";
width: 14px;
height: 14px;
border: 3px solid #fff;
background-color: #ced4da;
border-radius: 7px;
display: inline-block;
margin-bottom: -2px;
margin-right: 7px;
box-shadow: 0px 0px 0px 1px #ced4da;
}
테두리를 두른 회색 원을 만들고 테두리를 다시 1px 돌립니다!
언급URL : https://stackoverflow.com/questions/5394116/outline-radius
'programing' 카테고리의 다른 글
| PowerShell 스크립트에 인수를 전달하려면 어떻게 해야 합니까? (0) | 2023.04.08 |
|---|---|
| Windows 배치 파일에서 콘솔에 빈(빈) 행을 에코합니다. (0) | 2023.04.08 |
| SQL Server 쿼리: 테이블의 열 목록과 데이터 유형, NOT NULL 및 Primary KEY 제약 조건을 가져옵니다. (0) | 2023.04.08 |
| PowerShell에서 파일을 한 줄씩 스트림으로 처리하는 방법 (0) | 2023.04.08 |
| 디렉토리가 존재하지 않는 경우 작성 (0) | 2023.04.08 |