css實現圓形、橢圓和半圓效果程式碼例項

antzone發表於2017-03-07
CSS

分享一段程式碼例項，它實現了多種小狗，比如圓形、半圓和橢圓等。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
div{
  width:200px;
  height:100px;
  background:red;
  margin:30px;
  float:left;
}
.div1{
  width:100px;
  height:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
.div2{
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
.div3{
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.div4{
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.div5{
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
.div6{
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}
.div7{
  border-radius: 100% 0 0 0 / 100% 0 0 0;
}
.div8{
  border-radius: 0 100% 0 0 / 0 100% 0 0;
}
.div9{
  border-radius: 0 0 100% 0 / 0 0 100% 0;
}
.div10{
  border-radius: 0 0 0 100% / 0 0 0 100%;
}
</style> 
</head>    
<body> 
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
  <div class="div7"></div>
  <div class="div8"></div>
  <div class="div9"></div>
  <div class="div10"></div>
</body> 
</html>

上面的程式碼實現了我們的要求，核心程式碼可以參閱CSS3 border-radius一章節。

相關文章