這篇文章主要介紹“css怎么使用border和border-radius繪制小圖形”，在日常操作中，相信很多人在css怎么使用border和border-radius繪制小圖形問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css怎么使用border和border-radius繪制小圖形”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
大都知道border屬性有四個參數，那么border－radius必然也是有四個參數
我們知道border屬性的四個參數分別是border-top,border-right,border-bottom,border-left.(按順時針方向)
那么border-radius四個參數是什么了？
border-radius:上左，上右，下右，下左；
下面我們利用border-radius繪制一些大家平時常見的圖片。
1.簡單的圓形
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
#div{
width:200px;
height:200px;
background:red;
border-radius:50%;
}
</style>
</head>
<body>
<divid="div">
</div>
</body>
</html>
效果圖：
2.橢圓
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
#div{
width:100px;
height:200px;
background:red;
border-radius:50%;
}
</style>
</head>
<body>
<divid="div">
</div>
</body>
</html>
到此，關于“css怎么使用border和border-radius繪制小圖形”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
