11.盒子模型（border边框、padding内边距、margin外边距）、出现问题：2.父元素和子元素外边距合并、3.清楚内外边距、圆角边框、盒子阴影、文字阴影、文字边框、文本裁剪属性、

目录

一.盒子模型

二.出现问题——父元素和子元素外边距合并

 三.清楚内外边距

四.圆角边框

五.盒子阴影、文字阴影

---

一.盒子模型

1.盒子——边框border的简写（复合写法）

 

 2.盒子——内边距paddig的简写（复合写法）

二.出现问题——父元素和子元素外边距合并

 三.清楚内外边距

 

四.圆角边框

百分比也可以。

五.盒子阴影、文字阴影

六：凹凸效果

 

        body {
            background-color: rgb(240, 239, 239);}
        .a {
            font-size: 100px;
            text-align: center;
            text-shadow: -1px -1px 0px #000, 1px 1px 0px #fff;
            color: rgb(240, 239, 239);}
        .b {
            font-size: 100px;
            text-align: center;
            text-shadow: -1px -1px 0px #fff, 1px 1px 0px #000;
            color: rgb(240, 239, 239);}
    <div class="a">你好，我是凹</div>
    <div class="b">你好，我是凸</div>

七：文字边框

八：文本裁剪属性(颜色是图片): -webkit-background-clip: text;

        .a {
            font-size: 80px;
            font-weight: 700;
            background: url(4.jpg) no-repeat 0 center;
            -webkit-background-clip: text;
            color: transparent;}