CSS畫圓角

時間 2020-05-20

標籤 css 圓角欄目 CSS 简体版

原文原文鏈接

 <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div{
    width:300px;
    height:300px;
    border:1px solid red;
   }
  </style>
 </head>
 <body>
  <div>用CSS畫圓角，目前主流瀏覽器已經支持</div>
 </body>
</html>

效果：html

以上並未添加圓角屬性。下面再添加屬性，這樣對比更清楚：瀏覽器

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div{
    width:300px;
    height:300px;
    border:1px solid red;
    border-radius:20px;
   }
  </style>
 </head>
 <body>
  <div>用CSS畫圓角，目前主流瀏覽器已經支持</div>
 </body>
</html>

效果：ide

沒有效果，爲何呢，由於用的IE瀏覽器版本較低，那麼換一個firefox來看下：firefox

圓角。3d

那麼既然能畫圓角試試畫個圓，上面的圓角是15px，總體是300px*300px的，那麼只要讓兩個圓角相加能爲300px的話就能夠畫成一個圓了：htm

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   #test1{

    width:300px;

    height:300px;

    border:1px solid red;

    border-radius:20px;

   }

   #test2{

    width:300px;

    height:300px;

    border:1px solid blue;

    border-radius:150px;

   }

  </style>

 </head>

 <body>

  <div id="test1">用CSS畫圓角，目前主流瀏覽器已經支持</div>

  <div id="test2">用CSS畫圓</div>

 </body>

</html>

效果：blog

1. CSS畫圓角
2. css 圓角
3. 【CSS】CSS畫矩形、圓、半圓、弧形、半圓、小三角、疑問框
4. CSS圓角框，圓角提示框
5. css畫半圓
6. CSS圓角效果
7. 純CSS圓角框
8. HTML+CSS畫圓、半圓、扇形、三角形
9. css 圓形動畫
10. 畫一個圓角矩形、橢圓
更多相關文章...
• PHP imagearc - 畫橢圓弧 - PHP參考手冊
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 使用Rxjava計算圓周率
• Git可視化極簡易教程 — Git GUI使用方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。