CSS 不规则的轮廓-outline

大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/39

前言

日常开发中,我们经常使用border来给元素增加一些美感,但是由于盒子模型的存在,border有时候会影响我们的判断,所以今天我们来介绍另一个属性来为元素增加一些美感。

outline

outlineCSS 中的属性在元素的外部绘制一条线。它类似于边界,除了:

  1. 它总是围绕所有边,你不能指定特定的边
  2. 它不是盒模型的一部分,因此不会影响元素或相邻元素的位置,也就是说outline outline不占据空间
  3. 它并不总是矩形

兼容性

除了IE浏览器,其他浏览器兼容性还是不错的。
CSS 不规则的轮廓-outline_第1张图片

语法

outline: [ || || ] | inherit

由此可见outline也是一个缩写的属性。

outline: 1px dashed red;

不占空间

首先定义一个p标签和一个div标签,然后div标签定义一个5px的border和一个20px的outline

p {
      outline: 1px dashed red;
  }
div {
    border:5px solid #000;
  outline: 20px dashed red;
}

outline: 1px dashed red;

outline: 20px dashed red;

最终的效果,可以清楚的看到div上定义的outlin已经跑到了p标签上。

CSS 不规则的轮廓-outline_第2张图片

不一是矩形

使用span进行测试,使用br进行换行,使得每一行的字数都不一样。

  我是outline
我可以创建非矩形
的边框
span { outline: 1px dashed red; }

最终效果,可以看见outline只在字上面有。
CSS 不规则的轮廓-outline_第3张图片
换成border我们再试试

border:1px solid #000;

乍一看,好像border创建的也是不规则的呀,但是再仔细看,边框其实并不是不规则的,只是换行了而已。

CSS 不规则的轮廓-outline_第4张图片

outline-style 轮廓样式

属性值

dotted

CSS 不规则的轮廓-outline_第5张图片

dashed

CSS 不规则的轮廓-outline_第6张图片

solid

CSS 不规则的轮廓-outline_第7张图片

double

CSS 不规则的轮廓-outline_第8张图片

groove

CSS 不规则的轮廓-outline_第9张图片

ridge

CSS 不规则的轮廓-outline_第10张图片

inset

CSS 不规则的轮廓-outline_第11张图片

outset

CSS 不规则的轮廓-outline_第12张图片

outline-color 轮廓颜色

颜色值

outline-color: invert;

invert (IE兼容)

经测试:最新版的chrome和火狐浏览器不支持此值
仅在IE中测试使用

对比

页面的背景颜色是白色,outline就是黑色。
` outline-color: invert;
`

CSS 不规则的轮廓-outline_第13张图片

页面的背景颜色是黑色,outline就是白色。
CSS 不规则的轮廓-outline_第14张图片

outline-width 轮廓宽度

属性值

thin

1px

CSS 不规则的轮廓-outline_第15张图片

medium

3px

CSS 不规则的轮廓-outline_第16张图片

thick

5px

CSS 不规则的轮廓-outline_第17张图片

\

outline-width: 10px;
CSS 不规则的轮廓-outline_第18张图片

outline-offset 轮廓偏移

数值

当参数值为正数时,表示轮廓向外偏移
outline-offset: 10px;
CSS 不规则的轮廓-outline_第19张图片

当参数值为负值时,表示轮廓向内偏移

outline-offset: -10px;
CSS 不规则的轮廓-outline_第20张图片

你可能感兴趣的