CSS 17

라디오 버튼의 색상을 어떻게 변경합니까?

라디오 버튼의 색상을 어떻게 변경합니까? 즉, 라디오 버튼 자체가 둥근 모양과 가운데에 점이 있습니다(버튼을 선택했을 때).제가 바꾸고 싶은 것은 둘 다 색깔입니다.이것은 CSS를 사용해서 할 수 있습니까?빠른 수정은 다음을 사용하여 라디오 버튼 입력 스타일을 오버레이하는 것입니다.:after input[type='radio']:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #d1d3d1; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } inp..

programing 2023.10.26

점선 테두리 점 사이의 간격을 늘리는 방법

점선 테두리 점 사이의 간격을 늘리는 방법 나는 내 상자에 점선 스타일의 테두리를 사용하고 있습니다. .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } 테두리의 각 점 사이의 간격을 늘리고 싶습니다.이 방법은 수평 및 수직 경계에 모두 적용됩니다. /*Horizontal*/ background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 3px 1px; background-repeat: repeat-x; /*Vertical*/ background-image: l..

programing 2023.10.21

CSS3 애니메이션으로 눈 깜빡임 태그 따라하기

CSS3 애니메이션으로 눈 깜빡임 태그 따라하기 자바스크립트나 텍스트 데코레이션을 사용하지 않고 옛날 스타일의 텍스트를 깜빡이게 만들고 싶습니다. 전환 없음, *blink*, *blink*, *blink*만! 이는 다른 질문의 OP가 점멸을 연속적인 전환으로 대체하는 방법을 묻는 반면, 연속적인 전환 없이 점멸을 요청하기 때문에 해당 질문과 다릅니다.오리지널 넷스케이프80%의 듀티 사이클을 가지고 있었습니다.이건 꽤 가까이 다가왔지만, 진짜는텍스트에만 영향을 미칩니다. .blink { animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; } @k..

programing 2023.10.21

인라인 블록 요소가 라인의 나머지 부분을 채우도록 하는 방법은?

인라인 블록 요소가 라인의 나머지 부분을 채우도록 하는 방법은? 테이블을 사용하는 대신 CSS와 두 개의 인라인 블록(또는 다른 것) DIV 태그를 사용하여 그러한 것이 가능합니까? 테이블 버전은 다음과 같습니다(표시할 수 있도록 테두리가 추가됨). 고정 너비(백분율 너비가 아님)를 가진 왼쪽 열과 선의 나머지 공백을 채우기 위해 확장되는 오른쪽 열을 생성합니다.아주 간단한 것 같네요, 그렇죠?또한 아무것도 "떠있는" 것이 없기 때문에, 부모 컨테이너의 높이는 콘텐츠의 높이를 포함하도록 적절하게 확장됩니다. ­호통을 시작하는 독자 측면 기둥이 고정된 다중 기둥 배치에 대한 "명확한 수정"과 "성배" 구현을 본 적이 있는데, 그것들은 형편없고 복잡합니다.요소의 순서를 반대로 하거나, 백분율 폭을 사용하거나..

programing 2023.10.16

CSS 애니메이션 종료 시 최종 상태 유지

CSS 애니메이션 종료 시 최종 상태 유지 다음으로 설정된 일부 요소에 대해 애니메이션을 실행하고 있습니다.opacity: 0;CSS에클릭 시 애니메이션 클래스가 적용되며 키프레임을 사용하여 불투명도를 다음과 같이 변경합니다.0로.1(무엇보다도) 안타깝게도 애니메이션이 끝나면 요소들은 다시opacity: 0(Firefox와 Chrome 모두에서).저의 자연스러운 생각은 애니메이션 요소가 원래의 특성을 무시하고 최종 상태를 유지한다는 것입니다.사실이 아닌가요?만약 그렇지 않다면 어떻게 요소를 그렇게 하도록 할 수 있습니까? 코드(접두사 버전은 포함되지 않음): @keyframes bubble { 0% { transform:scale(0.5); opacity:0.0; } 50% { transform:scal..

programing 2023.10.11

-moz- and -webkit-는 무엇입니까?

-moz- and -webkit-는 무엇입니까? 이 질문에는 이미 다음과 같은 답변이 있습니다. 브라우저가 CSS 속성에 대한 벤더 접두사를 만드는 이유는 무엇입니까? (2개 답변) 닫힘4년 전에. -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; 저는 CSS 초보자인데 요전에 CSS 코드를 보고 있을 때 이 선들을 발견했습니다.CSS를 배우기 위해 사용한 튜토리얼에서 이런 대사는 본 적이 없습니다.이 대사들에 대한 설명은 무엇입니까?아니면 이런 라인을 구현하는 방법을 배울 수 있는 소스가 있습..

programing 2023.10.01

목록 항목 사이에 세로 공간을 설정하려면 어떻게 해야 합니까?

목록 항목 사이에 세로 공간을 설정하려면 어떻게 해야 합니까? A안에요소, 분명히 선 사이의 수직 간격을 선 높이 속성으로 포맷할 수 있습니다. 제 질문은, A 안에요소, 목록 항목 간의 세로 간격을 어떻게 설정합니까?마진을 사용할 수 있습니다.예를 참조하십시오. http://jsfiddle.net/LthgY/ li{ margin: 10px 0; } HTML A B C D E CSS li:not(:last-child) { margin-bottom: 5px; } 편집: 마지막 원소에 특수한 경우를 사용하지 않으면 목록에 작은 간격이 표시됩니다. http://jsfiddle.net/wQYw7/ 이제 제 솔루션과 비교해 보십시오. http://jsfiddle.net/wQYw7/1/ 물론 이것은 오래된 브라우저..

programing 2023.09.26

장치가 터치스크린인지 감지하는 미디어 쿼리

장치가 터치스크린인지 감지하는 미디어 쿼리 미디어 쿼리를 사용하여 터치스크린 장치에 없을 때 어떤 일이 일어나도록 하는 가장 안전한 방법은 무엇입니까?면,하십니까 같은 하는 것을 요?!window.Touch아니면 모더니즈?CSS4 미디어 쿼리 초안에는 실제로 이에 대한 속성이 있습니다. '포인터' 미디어 기능은 마우스와 같은 포인팅 장치의 존재와 정확성을 쿼리하는 데 사용됩니다.장치에 여러 입력 메커니즘이 있는 경우 UA에서 기본 입력 메커니즘 중 가장 기능이 없는 포인팅 장치의 특성을 보고하는 것이 좋습니다.이 미디어 쿼리는 다음 값을 사용합니다. . -다. 합니다. -합니다. -합니다 이는 다음과 같이 사용됩니다. /* Make radio buttons and check boxes larger if ..

programing 2023.09.26

CSS에서 최대 문자 길이 설정

CSS에서 최대 문자 길이 설정 저는 학교를 위해 대응하는 웹사이트를 만들고 있고, 제 질문은 다음과 같습니다. 내 웹 사이트(75자 정도)에서 문장의 최대 문자 길이(CSS 포함)를 설정하는 방법은 무엇입니까? 화면이 매우 클 때 문장이 75자 이상으로 진행되지 않습니다. 최대 너비를 시도해 보았지만 배치가 엉망입니다.저는 플렉스박스와 미디어 쿼리를 사용하여 응답성을 높이고 있습니다. 을 은 할 은 을 할 max-widthellipsis 식으로 p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } 예: .wrapper { padding: 20px; background: #eaeaea; max-widt..

programing 2023.09.11

스판이나 디브 포장 방지

스판이나 디브 포장 방지 저는 한 무리의 사람들을div컨테이너에 고정된 폭의 요소들과 가로 스크롤 바가 나타났습니다. 그div/span요소는 HTML에 표시되는 순서대로 왼쪽에서 오른쪽으로 한 줄로 표시되어야 합니다. 이렇게 하면 가로 스크롤 막대가 나타나고 세로 스크롤 막대 대신 콘텐츠를 읽는 데 사용할 수 있습니다(왼쪽에서 오른쪽으로). 그들을 컨테이너에 띄운 다음에 그들을 집어넣어 보았습니다.white-space: nowrap용기에 있는 스타일이지만, 아차, 여전히 포장된 것 같습니다. 아이디어? 다음과 같이 보입니다. .slideContainer { white-space: nowrap; } .slide { width: 800px; float: left; display: inline; } Some ..

programing 2023.09.06