CSS系列之盒子模型/边框/外边距/内边距/如何设置圆角边框/盒子阴影

最新推荐文章于 2023-04-04 14:49:21 发布

DOGIOOH

最新推荐文章于 2023-04-04 14:49:21 发布

阅读量2.2k

点赞数

分类专栏： CSS 文章标签： JavaWeb

本文链接：https://blog.csdn.net/yinyanyao1747/article/details/92851700

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS系列之盒子模型/边框/外边距/内边距/圆角边框/盒子阴影

01 盒子模型

盒子模型总尺寸=内容宽度+border（边框宽度）+padding（内边距）+margin（外边距）

02 边框

常用边框设置
- border-color：设置边框颜色
  - border-top-color
  - border-right-color
  - border-bottom-color
  - border-left-color
  - 同时设置上、右、下、左（顺时针）边框颜色简写方式：border-color:#369 #000 #f00 #00f;
- border-width：设置边框粗细
  - 属性值设置：thin细 /medium中等/thick粗/像素值（单位px）
- border-style：设置边框样式
  - 属性值设置：none/hidden/dotted星状虚线/dashed虚线/solid实线/double双线
边框简写形式
- 同时设置边框颜色，粗细和样式
  - border:1px solid red；

03 外边距

外边框设置
- margin
  - margin-top 设置顶端外边距
  - margin-right 设置右端外边距
  - margin-bottom 设置底部外边距
  - margin-left 设置左端外边距
  - margin

如何设置网页居中对齐
- margin：0px auto；

04 内边距

设置内边距
- padding
  - padding-left 设置左端内边距
  - padding-right 设置右端内边距
  - padding-top 设置顶端内边距
  - padding-bottom 设置底部内边距
  - padding

05 如何设置圆角边框

语法：
- border-radius：10px 20px 30px 40px （四个属性值按顺时针排列，分别是左上右上右下左下的圆角边框的属性值）
- border-radius：10px；（四个角属性值都为10px）

06 盒子阴影

语法
- box-shadow：阴影类型属性 x轴位移 y轴位移阴影模糊半径阴影颜色

07 程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        #two{
            width: 300px;
            height: 300px;
            background: lightblue;
            border-radius: 10px;
            border:1px solid antiquewhite;
            margin: 0px auto;
            float: left;
        }

        #one{
            width: 200px;
            height: 200px;
            background: pink;
            border-radius: 10px;
            border:1px solid antiquewhite;
            margin: 50px auto;
            float: none;

        }

    </style>

</head>
<body>



<div id="two"><div id="one"></div></div>


</body>
</html>

运行结果

DOGIOOH

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS系列之盒子模型/边框/外边距/内边距/如何设置圆角边框/盒子阴影

CSS系列之盒子模型/边框/外边距/内边距/圆角边框/盒子阴影01 盒子模型盒子模型总尺寸=内容宽度+border（边框宽度）+padding（内边距）+margin（外边距）02 边框常用边框设置border-color：设置边框颜色border-top-colorborder-right-colorborder-bottom-colorborder-left-colo...
复制链接

扫一扫

专栏目录