目录

一 盒子的大小

默认情况下盒子的大小由内容区、内边距和外边框共同决定的，但是也是可以通过属性进行设置。
在这里插入图片描述

box-sizing用来设置盒子尺寸的计算方法（设置width和height的作用）：
可选值：
box-sizing:content-box;默认值，宽度和高度设置内容区的大小；
box-sizing:border-box;边框盒子，宽度和高度设置整个盒子可见框的大小，包括内容区、内边距、外边框的大小；

box-sizing:border-box;

二 盒子的轮廓

outline:10px red solid;
和border的使用方法一样，不一样的地方是outline不会影响可见框的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa; 
        }
        .box:hover{
            outline:10px red solid;
        }
       
    </style>
</head>
<body>
    <div class="box">

    </div>
    <span>hello</span>
</body>
</html>

在这里插入图片描述

三 盒子的阴影

box-shadow: 用来设置元素的阴影效果，阴影也不会影响页面布局。默认阴影和元素一样大。
box-shadow:10px 10px orange;第一个10px相当于margin-left，左侧偏移量，正值向右移动，负值向左移动；第二个值是垂直偏移量，相当于margin-top，正值向下移动，负值向上移动；第三个值是阴影的模糊半径；第四个值是阴影的颜色。

width: 200px;
height: 200px;
box-shadow: 10px 10px 5px black;
background-color: #bfa;

效果：
在这里插入图片描述

四 盒子的圆角

border-radius:用来设置圆角，圆角设置的圆的半径大小。可以设置两个值，第一个值设置水平半径，第二个值设置垂直半径。
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
可以简便设置四个值：分别为左上、右上、右下、左下；
如果设置三个值：分别为左上、右上/左下、右下；
如果设置两个值：左上/右下、右上/左下；
如果设置一个值：设置四个角同样的值。

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

可以通过设置，来实现一个圆形的绘制。

			width: 200px;
			height: 200px;
            background-color: #bfa;
            border-radius: 50%;

效果：
在这里插入图片描述

# css
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

Langchain4j框架入门

avatar 2048 AI社区
cover

2026年最新版Codex客户端下载与安装教程

avatar 2048 AI社区

每日 AI 研究简报 · 2026-05-16

Cerebras 上市首日市值突破千亿美元，AI 芯片格局再添变数；Intercom 更名 Fin 推出「管理 Agent 的 Agent」；Anthropic 将战场从模型转向 Agent 控制平面——2026 年的 AI 竞争正在从「谁的模型更强」转向「谁的 Agent 生态更完整」。

avatar 2048 AI社区