Programing

윤곽 반경?

lottogame 2020. 2. 21. 22:03
반응형

윤곽 반경?

어쨌든 점점 거기에 둥근 모서리를 온 개요 (A)의 div element유사, border-radius?

오래된 질문이지만 지금은 비슷한 문제가있는 사람과 관련이 있습니다. 입력 필드가 둥글고 border포커스 외곽선의 색상을 변경하고 싶었습니다. outline입력 컨트롤에 끔찍한 사각형 을 길 들이지 못했습니다 .

대신 상자 그림자를 사용했습니다. 실제로 그림자의 부드러운 모양을 선호했지만 둥근 윤곽을 시뮬레이션하기 위해 그림자를 강화할 수 있습니다.

 /* Smooth outline with box-shadow: */
    .text1:focus {
        box-shadow: 0 0 3pt 2pt red;
    }

    /* Hard "outline" with box-shadow: */
    .text2:focus {
        box-shadow: 0 0 0 2pt red;
    }
<input type=text class="text1"> 
<br>
<br>
<br>
<br>
<input type=text class="text2">

나는 보통 : after pseudo-element를 사용하여 이것을 달성합니다 :

물론 사용법에 따라 다르지만이 방법을 사용하면 하드 섀도 방법을 사용하지 않고 개별 테두리를 제어 할 수 있습니다.

또한 -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 변형을 생략했습니다. 위의 결과를 볼 수 있습니다

당신은 이와 같은 것을 찾고 있다고 생각합니다.

div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

편집하다

Firefox 만 가능 -moz-outline-radius하지만 IE / Chrome / Safari / Opera / etc에서는 작동하지 않습니다. 따라서 가장 크로스 브라우저와 호환되는 방법처럼 보입니다. * 테두리 주위에 곡선을 만드는 것은 래퍼 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>

* 이미지 사용 제외

Bootstrap navbar의 드롭 다운 메뉴에 대한 멋진 포커스 액세스 기능을 원했으며 다음과 같이 만족했습니다.

     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>

방금 이것에 대한 훌륭한 해결책을 찾았으며 지금까지 모든 응답을 검토 한 결과 아직 게시되지 않았습니다. 그래서 여기 내가 한 일이 있습니다.

클래스에 대한 CSS 규칙을 만들고 해당 규칙에 의사 클래스 : focus를 사용했습니다. 나는 설정 outline: none이 기본 밝은 파란색이 아닌 국경 반경 수 '윤곽'기본적으로 그 크롬의 사용을 제거 할 수 있습니다. 그런 다음 :focus윤곽선이 더 이상 존재하지 않는 동일한 의사 클래스에서 반경 및 경계 속성을 추가했습니다. 다음과 같은

outline: none;
border-radius: 5px;
border: 2px solid maroon;

사용자가 요소를 탭으로 선택할 때 테두리 반경이있는 적갈색의 외곽선을 갖습니다.

그가 무슨 뜻인지 알아

양각 모양을 원하면 다음과 같이 할 수 있습니다.

http://jsfiddle.net/xxCT8/

그는 다른 브라우저에서이 작업을 수행 할 수있는 방법을 찾고 있습니다. 내가 찾은 해결 방법은 없지만 다른 사람이 있습니까?

편집 : 이 작업을 수행 할 수있는 유일한 다른 방법은 상자 그림자를 사용하는 것입니다. 그러나 해당 요소에 상자 그림자가 이미 있으면 작동하지 않습니다.

테두리가없는 윤곽선 만 필요한 경우 해결책이 있습니다. 그건 내 것이 아니다. Bootstrap CSS 파일에서 얻었습니다. 을 지정 outline: 1px auto certain_color하면 특정 색상의 div 주위에가는 외부 선이 나타납니다. 이 경우 지정된 너비는 중요하지 않습니다. 10px 너비를 지정하더라도 어쨌든 얇은 선이됩니다. 언급 된 규칙의 핵심 단어는 "자동"입니다.
둥근 모서리와 특정 너비의 윤곽이 필요한 경우 필요한 너비와 동일한 색상으로 테두리에 CSS 규칙을 추가 할 수 있습니다. 윤곽을 두껍게 만듭니다.

아니요. 테두리는 요소 외부와 상자 모델 여백 영역의 내부에 있습니다. 윤곽선은 요소 내부에 있으며 상자 모델 패딩 영역에서는이를 무시합니다. 미학을위한 것은 아닙니다. 디자이너에게 요소의 개요를 보여주기 위해서입니다. 예를 들어 html 문서를 개발하는 초기 단계에서 개발자는 모든 골격 div를 올바른 위치에 배치했는지 신속하게 식별해야 할 수 있습니다. 나중에 그들은 다양한 버튼과 형태가 서로 올바른 픽셀 수인지 확인해야 할 수도 있습니다.

테두리는 본질적으로 미적입니다. 윤곽선과 달리 그것들은 실제로 상자 모델과 떨어져 있습니다. 즉, 텍스트 세트를 여백으로 겹치지 않습니다 : 0; 테두리의 각면은 개별적으로 스타일을 지정할 수 있습니다.

윤곽선에 모서리 반경을 적용하려고하면 대부분의 사람들이 테두리를 사용하는 방식으로 사용한다고 가정합니다. 그래서 당신이 나에게 묻는 것을 신경 쓰지 않는다면, 외곽선의 어떤 속성이 경계를 넘어서 바람직합니까?

콤비네이션 박스 섀도우와 개요.

내가 찾은 Lea Hayes 답변 에 약간의 왜곡

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

정말 좋은 마무리를 얻습니다. 경계 반경을 사용할 때 얻는 크기가 줄어 듭니다.

테두리에는 패딩과 배경색을 사용하고 윤곽선에는 테두리를 사용하십시오.

.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를 만듭니다!

clip-path: circle(100px at center);

이것은 실제로 클릭 가능한 원을 만드는 반면, 경계 반경은 여전히 ​​정사각형을 만들지 만 원처럼 보입니다.

참고 URL : https://stackoverflow.com/questions/5394116/outline-radius



반응형

'Programing' 카테고리의 다른 글

언제 예외를 던지나요?  (0) 2020.02.21
스피너 텍스트 크기와 텍스트 색상을 변경하는 방법은 무엇입니까?  (0) 2020.02.21
끌어 오기 후 커밋 된 (그러나 푸시되지 않은) 변경 사항을 새 분기로 이동  (0) 2020.02.21
AngularJS : 서비스 변수를 보는 방법?  (0) 2020.02.21
LaTeX 테이블에서 텍스트를 줄 바꿈하는 방법은 무엇입니까?  (0) 2020.02.21

'Programing'의 다른글

  • 현재글윤곽 반경?

관련글

댓글

티스토리툴바