03-08 08:11 阅读 70

CSS3----盒模型新增样式

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .test{
                width: 200px;
                height: 200px;
                background: #BBFFAA;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                text-align: center;
                line-height: 200px;
                
                box-shadow:inset 10px 10px 10px 0px black ;
            }
        style>
    head>
    <body>
        
                <div class="test">
                    test
                div>
    body>
html>

盒模型阴影　box-shadow和文本阴影一样

语法　　

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow　　水平阴影位置

v-shadow　　垂直阴影位置

blur　　模糊距离

spread　　阴影尺寸

color　　阴影颜色

inset　　外部阴影改为内部阴影

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /* img{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            } 图片有自己的定位方式*/
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            img{
                width: 12.5rem;
                height: 12.5rem;
                vertical-align: middle;
                -webkit-box-reflect:right 0.625rem;
            }
        style>
    head>
    <body>
        <img src="../7.文本新增样式/img/周冬雨.jpg" >
    body>
html>

倒影

　　-webkit-box-reflect: 属性设置倒影

注意图片位置排布

vertical-align　设置元素垂直对齐方式
　　　属性值middle设置为居中

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            div{
                width: 12.5rem;
                height: 12.5rem;
                display: inline-block;
                background: #BBFFAA;
                overflow: auto;
                resize: both;
                
            }
            
        style>
    head>
    <body>
        <div>div>
    body>
html>

resize不常用了解就好，

规定可以由用户调整 div 元素的大小：

属性值　　none 默认值 无法调整元素大小
　　　　　both 可以调整元素的高度和宽度
　　　　　horizontal 可以调整元素的宽度
　　　　　vertical 可以调整元素的高度

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                
                width: 200px;
                height: 200px;
                padding: 50px;
                background: #BBFFAA;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -100px 0 0 -100px;
                box-sizing: border-box;
            }
            
        style>
    head>
    <body>
        <div>div>
    body>
html>

box-sizing：border-box从已设定的宽高分别减去边框和内边距得到内容的宽高

原文：https://www.cnblogs.com/kfj010810/p/15008516.html