CSS技巧 (3)

关于CSS技巧的一些题目

题目列表

所有答案点击题目链接

1、下面这个左边竖条图形，只使用一个标签，可以有多少种实现方式：

2、类似下面这样的条纹边框，只使用一个标签，可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型：

技巧:

• 利用linea-gradient 渐变

  • 缺点：IE9及以下版本不支持

• 利用background-clip

  语法:

background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。

• 利用border+ouline(伪元素)

  .rect_three{
    border:10px solid #9C27B0;
    position:relative;
     &::before{
     content:"";
     position:absolute;
     left:0;top:0;right:0;bottom:0;
     outline: dashed 10px #2196F3;
    }
  }

• 利用 border+box-shadow(伪元素)

  语法：

  inset | offset-x | offset-y | color

  offset-x | offset-y | blur-radius | spread-radius | color

  .rect_four{
    border:10px dashed #2196F3;
    position:relative;
    font-size:5px;
    &::before{
      position:absolute;
      content:"";
      top:0;bottom:0;left:0;right:0;
      z-index:-1;
      box-shadow: 0 0 0 10px #9C27B0;
    }
  }

3、层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？

举个例子：

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
    <!-- 或者 -->
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

样式如下：

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

我们会发现 无论先生成哪个DOM元素,内联块都会堆叠在浮动块以上,看下面的层叠样式表便可知晓：