一、介绍
盒子模型组成部分：标准盒子
从内向外：
1.内容区：content：分内容的
2.内边距：padding：设置内容与边框的距离
3.边框：border：设置区分盒子内外
4.外边距：margin：设置元素与元素之前的距离，设置元素的位置
用法与padding基本一致 -->
二、div盒子的属性
边框：
Border： 边框基本属性
boder-style：边框样式
boder-color：边框颜色
border-width：边框宽度
border-collapse：边框合并
border-radius：边框弧度
border-方向设置某一边的边框
Border边框基本属性
border-top：设置上边框
right：设置右边框
bottom：设置下边框
left:单独设置左的边框样式
2.内边距
padding-top:单独设置上内边距
padding-right:单独设置右内边距
padding-bottom:单独设置下内边距
padding-left:单独设置左内边距
三、应用
制作圆
<!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">
<title>csdn</title>
<style>
.div1 {
width: 200px; 设置宽度
height: 200px; 设置高
background-color: aqua; 颜色
border-radius: 50%;
}效果：
制作半圆
.div2 {
width: 200px; 设置宽
height: 100px; 设置高
background-color: bisque; 颜色
border-radius: 0 0 100px 100px; 设置右下，坐下
}效果图
注意：要修改不同角度的半圆改变宽度和高度以及border-radius: 0 0 0 100; （左上 右上 右下 左下）的值即可
制作4/1圆
.div5 {
width: 100px;
height: 100px;
background-color: brown;
border-radius: 0 0 100px 0;
}效果：
注意:要设置不同方向的四分之一圆或者大小就修改宽度和高度以及border-radius: 0 0 0 100; （左上 右上 右下 左下）中的值
932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
