css outline

这篇文章发表于 阅读 2
css outline

outline 用于设置元素的轮廓,对于很多元素来说,如果没有设置轮廓就是不可见的,但是输入型元素例外,其样式由浏览器决定。

下面先看一个效果:

上面给div元素设置了outline属性。 效果看起来跟border属性相似,但是outline不会占用空间,其绘制在元素的周围,它悬浮在元素边框之上。

用法

outline的取值:

  • outline-color: 设置轮廓的颜色
  • outline-style: 设置轮廓的样式
  • outline-width: 设置轮廓的宽度

outline 可以取上面的任意一个、两个或者三个值,并且顺序不重要。

outline-offset

outline-offset用于设置outline与元素边缘的偏移量(是outline内侧与元素边缘的位置),默认为0。在上面的例子加上 10px 的偏移量。

可以看到outline与边缘的间隙变大了。

如果将值设置为负数 -10px:

如果整个图片都要被阴影遮住,使用outline-offset可以完成。 图片的宽度为120px,outline-offset 设置为60px,outline为60px。

这里outline-offset的值手动设置为图片的一半,如果换成其他尺寸的图片就需要更改,所以这里可以成100vmax,屏幕宽高的最大值。

使用鼠标hover来改变outline,在鼠标hover某个元素上时高亮该元素。

对图片进行裁剪,显示特定区域,如下显示五角星,同时给五角星加上旋转动画

参考资料

  1. https://css-tricks.com/fancy-image-decorations-outlines-and-complex-animations/