1. 首頁
  2. 問答
  3. 需要CSS半完成的邊界與完整的邊界

需要CSS半完成的邊界與完整的邊界

2017-02-28 104 views

回答

0

這是你如何在CSS實現它。

.wrapper{ 
 
    width: 100px; height: 100px; 
 
    border-radius: 50%; 
 
    border: 3px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.one{ 
 
    display: inline-block; 
 
    background-color: green; 
 
    height: 100px; width:50px; 
 
    border-right: 2px solid black; 
 
} 
 

 
.two{ 
 
    display: inline-block; 
 
    background-color: white; 
 
    height: 100px; width:50px; 
 
}
<div class="wrapper"> 
 
<div class="one"></div> 
 
<div class="two"></div> 
 
</div>

來源

2017-02-28 17:21:27

0 
<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
#circle { 
    border-radius: 100%; 
    height: 100px; 
    width: 100px; 
    border: solid black 3px; 
} 


#p1 { 
    border-top-left-radius: 50px; 
    border-bottom-left-radius: 50px; 
    background-color: green; 
    width: 49%; 
    height: 100%; 
    border-right: solid black 2px; 
} 
</style> 
<body> 
    <div id="circle"> 
     <div id="p1"></div> 
    </div> 
</body> 
</html>

來源

2017-02-28 19:42:22 EddyG

相關問題

 相關問題