zoukankan      html  css  js  c++  java
  • 盒子大小 轮廓阴影 圆角

    一、盒子大小(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>  
  • 相关阅读:
    利用快慢指针快速得到链表中间节点
    idea编译golang插件总结
    Jquery复习(二)之stop()易忘点
    Jquery复习(一)之animate()易忘点
    doT学习(三)之实战
    doT学习(二)之用法集合
    doT学习(一)之语法
    npm学习(十二)之高级用法
    npm学习(十一)之package-lock.json
    npm学习(十)之如何使用创建、发布、使用作用域包
  • 原文地址:https://www.cnblogs.com/nadou/p/13863652.html
Copyright © 2011-2022 走看看