카테고리 보관물: Html

Html

이미지를 사용하는 것보다 서클 div를 만드는 더 쉬운 방법은 무엇입니까? 쉬운 방법이 있는지 궁금합니다. 현재 각기

내가 지금하고있는 것보다 원형 div를 만드는 더 쉬운 방법이 있는지 궁금합니다.

현재 각기 다른 크기의 이미지를 만들고 있지만이 작업을 수행하는 것은 성가신 일입니다.

어쨌든 CSS를 사용하여 div를 원형으로 만들고 반경을 지정할 수 있습니까?

답변

데모는 다음과 같습니다. http://jsfiddle.net/thirtydot/JJytE/1170/

CSS :

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML :

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

IE8 및 이전 버전 에서이 작업을 수행하려면 CSS3 PIE를 다운로드하여 사용해야합니다. . 위의 데모는 IE8에서 작동하지 않지만 jsFiddle이 호스트하지 않기 때문 PIE.htc입니다.

내 데모는 다음과 같습니다.

답변

요소의 각면의 경계 반경을 50 %로 설정하면 모든 크기의 원 표시가 만들어집니다.

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  /* width and height can be anything, as long as they're equal */
}

답변

이 시도

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

답변

실제로 가능합니다.

CSS 팁 : 이미지없이 원을 만드는 방법을 참조하십시오 . 데모를 참조하십시오 .

그러나 기본적으로 호환성 측면에서 심각한 단점 이 있으므로 고양이 껍질을 만들고 있습니다.

여기서 작동하는지 확인 하십시오.

당신은 방금 설정해야 살펴 보 겠지만 height과 width에 반border-radius

행운을 빕니다!

답변

원을 구성하기 위해 여러 (20+) 수평 또는 수직 1px div를 사용하는 것도 나쁜 생각입니다. 이 jQuery 플러그인 은이 메소드를 사용하여 다른 모양을 구성합니다.

답변

크기에 따라 너비와 높이를 주지만 둘 다 동일하게 유지하십시오. 

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
<div class="circle">
</div>
스 니펫 확장

답변

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
스 니펫 확장

“이미지를 사용하는 것보다 원 div를 만드는 더 쉬운 방법”이라는 질문에 대한 다른 해결책을 언급하고 싶었습니다. FontAwesome을 사용하는 것입니다.

fontawesome CSS 파일 또는 CDN을 여기로 가져옵니다.

그리고 당신은 단지 :

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

글꼴 크기를 원하는 색상으로 지정할 수 있습니다.