CSS:outline的用法,用outline实现镂空效果

1.outline的用法

outline用法和border类似, 如下:

.outline {
 outline: 1px solid #000;
}

两者表现也类似, 都是给元素的外面画框,但是,作用却不一样。

2.outline的特性

(1)outline是一个和用户体验密切相关的属性,与focus状态和键盘访问关系密切。
在访问网页的时候,如果鼠标坏了,这时候我们一般会用tab键来按次序不断focus控件元素,包括:链接、按钮、输入框等表单元素,或者focus设置了tabindex的普通元素,按Shift+Tab组合键反方向访问。

在默认状态下,对处于focus状态的元素浏览器会通过虚框或者外发光的形式进行区分和提示,这个虚框或者外发光就是浏览默认的outline,如下图就是google默认的outline的效果。这个outline是很有用的,它可以提示用户自己当前聚焦在哪个元素上面,而且在此时按下回车键就相当于点击了这个元素。



(2)outline不占据空间
outline不论设置得多大,它都是不占据空间的,所以可以用来实现一些特殊的布局效果

3.outline的作用

(1)实现镂空的效果:
头像剪裁的矩形镂空效果, 下面是最简单的镂空效果:

<html>
  <head>
    <style>
      .crop {
        overflow: hidden;
        height: 300px;
        width: 300px;
        background: #f00;
      }
      .crop > .crop-area {
        width: 80px; height: 80px;
        outline: 9999px solid rgba(0,0,0,.5);
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="crop">
      <div class="crop-area">

      </div>
    </div>
  </body>
</html>

实现的效果如下,矩形左上角有个镂空的小正方形:



PS:因为outline是不占据空间的,所以可以通过设置outline的宽度很大来实现遮罩的效果。
(2)自动填满屏幕剩余空间的应用技巧
看下面的代码,内容显示完之后会留很大一片空白:

<html>
  <head>
    <style>
      .footer {
         height: 50px;
      }
      .footer > p {
        position: absolute;
        left: 0; right: 0;
        text-align: center;
        padding: 15px 0;
        background-color: #a0b3d6;
        clip: rect(0 9999px 9999px 0);
      }
    </style>
  </head>
  <body>
    <div class="footer">
      <p>test fill</p>
    </div>
  </body>
</html>

!](https://upload-images.jianshu.io/upload_images/7320499-3b0dea7b7c930b04.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

但是加了outline以后可以把这个屏幕用背景色填满:

<html>
  <head>
    <style>
      .footer {
         height: 50px;
      }
      .footer > p {
        position: absolute;
        left: 0; right: 0;
        text-align: center;
        padding: 15px 0;
        background-color: #a0b3d6;
        outline: 9999px solid #a0b3d6;
        clip: rect(0 9999px 9999px 0);
      }
    </style>
  </head>
  <body>
    <div class="footer">
      <p>test fill</p>
    </div>
  </body>
</html>

现在再也不用担心屏幕高度太高了!

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):