盒子大小 轮廓阴影 圆角

一、盒子大小（box-sizing）

- 默认情况下，盒子可见框大小由内容区、内边距和边框组成     

box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）                   

可选值：

content-box：默认值，宽度和高度用来设置内容区域

border-box：宽度和高度用来设置整个盒子可见框的大小

width和height 指的是内容区、内边距 和边框的总大小       

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子大小box-sizing</title>
    <style>
        div{
            width: 50px;
            height: 40px;
            background-color: orange;
            border: 2px solid skyblue;
            padding: 4px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>                          

二、轮廓（outline）

　　作用：用来设置元素的边框线，用法与border一模一样

不占据文档流的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓线outline</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: orange;
        }
        .box:hover {
            outline: 10px yellow solid;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、阴影（box-shadow）

box-shadow：设置元素的阴影效果，阴影不会影响页面布局

第一个值：水平偏移量（设置阴影的水平位置，正值向右，负值向左）

第二个值：垂直偏移量

第三个值：阴影的模糊半径

第四个值：阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: orange;
            box-shadow: 2px 4px 3px #999;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>   

四 、 圆角（border-radius）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: orange;
            /* border-radius: 50%; */
            /* border-radius: 10px; */
            /* border-radius: 5px 10px; */
            /* border-radius: 2px 6px 10px 20px; */
            /* border-radius: 3px 10px 6px; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
posted @ 2020-10-29 12:56  娜豆  阅读(89)  评论(0)  编辑  收藏  举报