CSS进阶-盒子边框与动画

东海若知意

已于 2023-03-24 19:13:18 修改

阅读量197

点赞数

分类专栏： Web 文章标签： css 前端 html

于 2023-03-10 12:03:21 首次发布

极正君

本文链接：https://blog.csdn.net/qq_44098341/article/details/129439931

版权

Chapter01 盒子模型与边框

1. 盒子

1.1 盒子模型

为了将页面元素合理有效的组织在一起，形成一套完整的，行之有效的原则和规范称为盒子模型。
盒子模型是一个很重要的概念，它由内容、边框、内边距、外边距四部分组成。
盒子的实际宽度也由content、padding、、margin共同组成。而content由width和height共同组成。每个盒子可以对边框、内边距和外边距的“上下左右”统一设置，也可以从**"****上右下左"4个方向分别设置样式

1.2 内容区

内容区（content）是盒子模型的中心，包含了盒子的主要信息内容，例如文本、图片等。内容区拥有width、height和overflow三个属性：
overflow属性用于当content中的信息太多，并超出内容区所占的范围时，通过该属性来指定溢出内容的处理方式，具体如下表所示。

值	描述
visible	默认值，溢出的内容不会被修剪，会呈现在元素框之外
hidden	溢出的内容将不可见
scroll	溢出的内容会被修剪，但是可以通过滚动条查看隐藏部分
auto	由浏览器决定如何处理溢出部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5-01 内容区属性使用</title>
    <style rel="sheetstyle" type="text/css">
        div{
     
            width: 450px;
            height: 90px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <h2>5-01 内容区属性设置</h2>
    <div>
        overflow 属性规定当内容溢出元素框时发生的情况
        <hr>
        <h4>说明</h4>
        这个属性定义溢出元素内容区的内容会如何处理，如果值为scroll，
        则不论是否需要，用户代理都会提供一种滚动机制。
        因此，会出现即使元素框中可以放下所有内容也会出现滚动条
    </div>

</body>
</html>

2. 边框

border就是围绕元素内容和内边距的一条或多条线

通过 border-top-style、border-right-style、border-bottom-style、border-left-style 四个属性对
“上右下左”四个方向的边框样式分别进行设置，每个边框又有宽度、颜色、样式、圆角等特征。

2.1 边框属性列表

值	描述
border-top-width	设置元素的上边框的宽度
border-top-style	设置元素的上边框的样式
border-top-color	设置元素的上边框的颜色
border-top	上边框的简写形式，用于把上边框的所有属性设置到一个声明中；可以按如下顺序设置属性：border-top-width、border-top-style、border-top-color
border-width (line width)	边框宽度的简写形式，用于设置元素所有边框的宽度，或者单独地为各边框设置宽度
border-style (line style)	边框样式的简写形式，用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-color	设置元素的所有边框中可见部分的颜色，或者单独地为各边设置边框颜色
border	边框的简写形式，用于把针对四个边的属性设置在一个声明： border: line-width line-style color
border-radius	圆角边框的简写形式，用于设置四个border-*-radius属性，CSS 3新增
box-shadow	向框添加一个或多个阴影，CSS 3新增

2.2 边框样式

line-style

边框样式取值如下，可以通过：

border-top-style、border-right-style、border-bottom-style、border-left-style来设定

值	描述
none/hidden	无边框 / 隐藏边框
dotted	定义点状边框，在大多数浏览器中呈现为实线
dashed	定义虚线，在大多数浏览器中呈现为实线
double	定义双线，双线的宽度等于border-width的值
groove	定义3D凹槽边框。其效果取决于border-color的值
ridge	定义3D菱形边框。其效果取决于border-color的值
inset	定义3D凹边，其效果取决于border-color的值
outset	定义3D凸边，其效果取决于border-color的值

.border_group{
    
     width: 960px;display: flex;
     flex-direction: row;flex-wrap: wrap;
}
.border_group div{
   width: 260px; 
          height: 60px; margin: 20px;
}
.dotted{
   border:8px dotted #F71384;}
.dashed{
   border:8px dashed #F71384;}
.double{
   border:8px double #F71384;}
.groove{
   border:8px groove #F71384;}
.ridge{
   </