CSS盒子模型

最新推荐文章于 2022-01-04 20:16:23 发布

原创最新推荐文章于 2022-01-04 20:16:23 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #盒子模型

Java前端专栏收录该内容

12 篇文章

订阅专栏

该博客围绕CSS盒子模型展开，介绍了边框颜色、粗细、样式及简写方法，还提及外边距与内边距，可通过margin使网页居中对齐。此外，讲解了圆角边框和盒子阴影的语法，最后给出了所有方法的代码示例。

本篇博客的所有图片均来源于作者<西部开源-秦疆>,转载请注明作者名称以及其个人博客地址：https://blog.kuangstudy.com/
还有作者B站地址：https://space.bilibili.com/95256449/

1、border-color:边框颜色

在这里插入图片描述

2、border-with:边框粗细

thin
medium
thick
像素值
在这里插入图片描述

3、border-style:边框样式

none;hidden;dotted;dashed;solid;double
在这里插入图片描述

4、边框简写

同时设置边框的颜色，粗细和样式
建议使用这个方法，更方便简洁。上面三种方法语句可供这个参考。
举例：

border:1px solid  red; 
border:2px dashed black;

5、外边距与内边距

外边距：

可以使用 margin:0px auto;使网页居中对齐
内边距：
在这里插入图片描述
盒子模型尺寸示意图：

6、圆角边框

语法示例
border-radius:20px 10px 50px 30px;
四个属性值按顺时针排列
在这里插入图片描述

7、盒子阴影

语法示例
box-shadow:inset x-offset y-offset blur-radius color;
x-offset：水平阴影位移量
y-offset：垂直阴影位移量
blur-radius：阴影模糊半径
color：阴影颜色

代码示例所有的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            /*设置区域宽度和高度*/
            width: 500px;
            height: 500px;
            /*设置边框粗细、样式和颜色*/
            border: 30px solid #ffdb86;
            /*设置区域背景颜色*/
            background-color: #ffee7e;
            /*设置外边距*/
            margin: 20px;
            /*网页居中*/
            margin: 0px auto;
            /*设置内边距*/
            padding: 20px;
            /*设置圆角边框*/
            border-radius: 50px;
            /*也可为四个角分别设置弧度，比如*/
            /*border-radius: 10px 30px 50px 80px;*/
            /*弧度最高100，四个角都是100那就是个圆了*/

            /*设置阴影*/
            box-shadow: inset 5px 5px 10px #ffbd7b ;
        }
    </style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>

在这里插入图片描述