HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡單易上手
發(fā)布時間：2021-05-10 14:58:40 作者：一號程序猿 
我要評論
我要評論這篇文章主要介紹了HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡單易上手,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
很多小伙伴在前端學習的時候，發(fā)現(xiàn)盒子模型默認為正方形。如何把盒子變成想要的模型呢？ 首先我們來看一下默認的情況----
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<style>
.box{
width: 100px;
height: 100px;
background-color: rgb(116, 51, 51);
box-shadow:0 10px 10px red;
text-align: center;
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:0;
top:0;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
默認情況下為正方形，也許小伙伴覺得不太好看。 我們換成圓形的試試！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(28, 99, 60);
border: 5px solid rgb(55, 0, 255);
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
<title>Round</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
看一下我們變成了圓形！ 來看看半圓形的吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
width: 100px;
height: 50px;
background-color: rgb(175, 42, 216);
border: 3px solid rgb(26, 236, 26);
border-top-right-radius: 50px;
border-top-left-radius: 50px;
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
<title>semicircle</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
來試試其他形狀!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
width: 100px;
height: 100px;
background-color: rgb(82, 84, 223);
border-radius: 20px 15px 20px 10px;
position: absolute;
margin: 0 auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
}
</style>
<title>demo</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
知識點分析：
border-radius:給元素設(shè)置圓角邊框
可以實現(xiàn)圓，半圓，橢圓，四分之一圓等各種圓角圖形。
可以設(shè)置四個值，分別為左上，右上，右下，左下
給個口訣，“從左上開始順時針移動”。。。
希望這篇文章能讓你學會border-radius屬性！
到此這篇關(guān)于HTML+css盒子模型案例（圓，半圓等）“border-radius” 簡單上手的文章就介紹到這了,更多相關(guān)html css盒子模型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3 border-radius圓角的實現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實現(xiàn)方法及用法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-14
使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-26
這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細的代碼資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-05- 用CSS3的border-radius屬性來制作圓角邊框相當順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
CSS3 border-radius(圓角)效果在線調(diào)試工具
這是一款可在線調(diào)試并預覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實時調(diào)試并顯示預覽效果的功能，同時能夠?qū)崟r生成對應的css3效果代碼，方便需要的朋友使用。2016-05-31利用CSS3的border-radius繪制太極及愛心圖案示例
CSS3中的border-radius可以輕松地用來繪制弧線,如果只用來做圓角矩形的話可就太浪費了,下面就來展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參2016-05-17CSS3中border-radius屬性設(shè)定圓角的使用技巧
這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10- 這篇文章主要介紹了實例講解CSS3中的border-radius屬性,是CSS3入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-18
