关于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{

    width:200px;

    height:200px;

}

.float{

    float:left;

    background-color:deeppink;

}

.inline-block{

    display:inline-block;

    background-color:yellowgreen;

    margin-left:-100px;

}

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

巴特西

CSS技巧 (3)

关于CSS技巧的一些题目

题目列表

所有答案点击题目链接

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

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

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

最新文章

热门文章