CSS盒子模型_西部开源秦疆博客

作者：我家自动化 | 2024-04-16 00:45:42

踩

西部开源秦疆博客

本篇博客的所有图片均来源于作者<西部开源-秦疆>,转载请注明作者名称以及其个人博客地址：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;
1
2

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/431319