|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【實例】CSS3畫一個半圓的方法
作者:admin 時間:2017-7-25 6:24:27 瀏覽:前文介紹了css3畫實心圓和圓角的方法，本文將繼續(xù)介紹用CSS3來畫一個半圓的方法。
CSS3畫一個半圓
無論圓角、圓弧、實心圓、半圓，css3的實現代碼都是 border-radius 屬性，border-radius 不但可以定義圓半徑和圓角大小，還可以設置圓弧的方向，進而畫出各種方向的半圓。
實現代碼很簡單，一個上半圓的css3代碼如下：
.semi-circle{
width:100px;
height:50px;
background-color:#cb18f8;
border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */
}代碼分析：
1）利用 border-radius 定義各個方向的圓弧半徑，把左上和右上的圓角半徑設為50px，右下和左下的圓角半徑設為0，出來的效果就是一個上半圓了。
2）圓角半徑要等于矩形高度 height ，上例的值是50px。
各種方向的半圓
上例是一個上半圓的實現代碼，我們可以調整 border-radius 的值，以及矩形寬度（width）和高度（height）的值，從而實現各種方向的半圓。如圖：
CSS3畫各種方向的半圓
html代碼如下：
<!DOCTYPE html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* 上半圓 */
.semi-circle{
width:100px;
height:50px;
background-color:#cb18f8;
border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */
}
/* 下半圓 */
.semi-circle2{
width:100px;
height:50px;
background-color:#cb18f8;
border-radius:0 0 50px 50px; /* 左上、右上、右下、左下 */
}
/* 左半圓 */
.semi-circle3{
width:50px;
height:100px;
background-color:#cb18f8;
border-radius:50px 0 0 50px; /* 左上、右上、右下、左下 */
}
/* 右半圓 */
.semi-circle4{
width:50px;
height:100px;
background-color:#cb18f8;
border-radius:0 50px 50px 0; /* 左上、右上、右下、左下 */
}
table{
width:400px;
}
</style>
</head>
<body>
<table><tr>
<td><div class="semi-circle"></div></td>
<td><div class="semi-circle2"></div></td>
<td><div class="semi-circle3"></div></td>
<td><div class="semi-circle4"></div></td>
</tr></table>
</body>
</html>
代碼分析：
1）利用 border-radius 定義各個方向的圓弧半徑，把同方向的兩個圓角半徑設為50px，其余兩個圓角半徑設為0，出來的效果就是一個半圓了。
2）圓角半徑要等于矩形高度 height 或寬度 width，各實例的值均是50px。
相關文章推薦
x
- 站長推薦
