HTML学习笔记6——盒子模型_html圆形盒子-CSDN博客

本文链接：https://blog.csdn.net/qq_45569406/article/details/126281159

盒子模型图示

在这里插入图片描述

边框

border-color
border-width
thin
medium
thick
像素值

border-top-width:5px; 
border-right-width:10px; 
border-bottom-width:8px; 
border-left-width:22px; 
border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

border-style
~~(引用链接：http://t.csdn.cn/Lj55j)~~

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>框线示例</title>
    <style>
        ul li{border-color: aquamarine; width: 200px;}
        ul li:nth-child(even){border-style: hidden; list-style-type: none;}
        ul li:nth-of-type(1){border-style: dotted;}
        ul li:nth-of-type(3){border-style: dashed;}
        ul li:nth-of-type(5){border-style: solid;}
        ul li:nth-of-type(7){border-style: double;}
        ul li:nth-of-type(9){border-style: groove;}
        ul li:nth-of-type(11){border-style: ridge;}
        ul li:nth-of-type(13){border-style: inset;}
        ul li:nth-of-type(15){border-style: outset;}
        ul li:nth-of-type(17){border-style: inherit;}
    </style>
</head>
<body>
    <div class="middle">
        <ul>
            <li>this is dotted</li>
            <li>&nbsp;</li>
            <li>this is dashed</li>
            <li>&nbsp;</li>
            <li>this is solid</li>
            <li>&nbsp;</li>
            <li>this is double</li>
            <li>&nbsp;</li>
            <li>this is groove</li>
            <li>&nbsp;</li>
            <li>this is ridge</li>
            <li>&nbsp;</li>
            <li>this is inset</li>
            <li>&nbsp;</li>
            <li>this is outset</li>
            <li>&nbsp;</li>
            <li>this is inherit</li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述
同时还可以设置上下左右框线

border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid;

border
同时设置边框的颜色、粗细和样式

border: 1px solid #3a6587;
border: 1px dashed red;

边距

外边距 margin
属性：
margin-top
margin-right
margin-bottom
margin-left
margin

margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

网页居中对齐

margin:0px  auto;

内边距 padding
属性：
padding-left
padding-right
padding-top
padding-bottom
padding

padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

圆角边框

border-radius: 20px  10px  50px  30px;

注意：四个属性值按顺时针排列

圆形的两个要点：
1.元素的宽度和高度必须相同
2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
    }

半圆形的两个要点：
1.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
2.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作半圆形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 50px;
            border-radius:0 0 50px 50px;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 100px;
            border-radius:0 50px 50px  0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

扇形的要点：
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作扇形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            border-radius:0 50px 0 0;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 50px;
            border-radius:0 0 50px 0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 50px;
            border-radius: 0 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color;

在这里插入图片描述
~~更具体的参考文章：http://t.csdn.cn/NQQ4U~~

总结

在这里插入图片描述