HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡(jiǎn)單易上手
發(fā)布時(shí)間：2021-05-10 14:58:40 作者：一號(hào)程序猿 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡(jiǎn)單易上手,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
很多小伙伴在前端學(xué)習(xí)的時(shí)候，發(fā)現(xiàn)盒子模型默認(rèn)為正方形。如何把盒子變成想要的模型呢？ 首先我們來看一下默認(rè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>
默認(rè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=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>
知識(shí)點(diǎn)分析：
border-radius:給元素設(shè)置圓角邊框
可以實(shí)現(xiàn)圓，半圓，橢圓，四分之一圓等各種圓角圖形。
可以設(shè)置四個(gè)值，分別為左上，右上，右下，左下
給個(gè)口訣，“從左上開始順時(shí)針移動(dòng)”。。。
希望這篇文章能讓你學(xué)會(huì)border-radius屬性！
到此這篇關(guān)于HTML+css盒子模型案例（圓，半圓等）“border-radius” 簡(jiǎn)單上手的文章就介紹到這了,更多相關(guān)html css盒子模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-14
使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-26
這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細(xì)的代碼資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-05- 用CSS3的border-radius屬性來制作圓角邊框相當(dāng)順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
CSS3 border-radius(圓角)效果在線調(diào)試工具
這是一款可在線調(diào)試并預(yù)覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實(shí)時(shí)調(diào)試并顯示預(yù)覽效果的功能，同時(shí)能夠?qū)崟r(shí)生成對(duì)應(yīng)的css3效果代碼，方便需要的朋友使用。2016-05-31利用CSS3的border-radius繪制太極及愛心圖案示例
CSS3中的border-radius可以輕松地用來繪制弧線,如果只用來做圓角矩形的話可就太浪費(fèi)了,下面就來展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參2016-05-17CSS3中border-radius屬性設(shè)定圓角的使用技巧
這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18
