CSS 盒子模型
【摘要】 一、什么是盒子模型css盒子模型又称为框模型，盒子的最内部是元素的实际内容即元素内容，紧挨着元素框外部的是内边距，其次是边框，然后最外层是外边距，这几部分共同组成了盒子模型。二、边框border-color属性说明示例border-top-color 上边框颜色border-top-color:#369; border-right-color右边框颜色border-right-color:#...
一、什么是盒子模型
css盒子模型又称为框模型，盒子的最内部是元素的实际内容即元素内容，紧挨着元素框外部的是内边距，其次是边框，然后最外层是外边距，这几部分共同组成了盒子模型。
二、边框border-color
| 属性 |
说明 |
示例 |
| border-top-color |
上边框颜色 |
border-top-color:#369; |
| border-right-color |
右边框颜色 |
border-right-color:#369; |
| border-bottom-color |
下边框颜色 |
border-bottom-color:#fae45b; |
| border-left-color |
左边框颜色 |
border-left-color:#efcd56; |
| border-coor |
四个边框为同一颜色 |
border-color:#eeff34; |
| 上、下边框颜色：#369 左、右边框颜色：#000 |
border-color:#369 #000; |
|
| 上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 |
border-color:#369 #000 #f00; |
|
| 上、右、下、左边框颜色： #369、#000、#f00、#00f |
border-color:#369 #000 #f00 #00f; |
三、边框粗细border-width
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
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;五、外边距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;六、内边距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;
八、圆形
利用border-radius属性制作圆形的两个要点，元素的宽度和高度必须相同，圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}九、盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）