实现效果——内容与边框有距离

最新推荐文章于 2024-08-01 08:03:25 发布

Hello_my_new_world

最新推荐文章于 2024-08-01 08:03:25 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：日常练习--前端小效果文章标签： outline css 边框轮廓蓝色外框

本文链接：https://blog.csdn.net/start_XUEBA/article/details/102512370

19 篇文章

订阅专栏

本文介绍如何使用CSS的outline属性来实现颜色块与边框之间的距离效果，提供了两种实现方法，并讨论了outline属性的兼容性和常见应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天遇到一个要实现的效果：一个颜色块有边框，边框与色块有一定距离，如下：

当时第一个想法是：用一个元素包裹另一个元素，外部元素有一定宽度的padding，或内部元素有一定宽度的margin。

今天遇到一个css属性可以实现一个HTML元素实现上图效果 —— outline属性。

outline：轮廓，是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，在元素中的位置如图：

值有：outline-color（设置轮廓的颜色），outline-style（设置轮廓的样式），outline-width（设置轮廓的宽度），inherit

实现上述效果：

方法一：outline设置轮廓，作为外边框；border设置为白色，具有一定宽度；再设置HTML元素的背景颜色；

HTML：

<div id="colorbox"></div>

CSS：

#colorbox{
		width:50px;
		height:50px;
		border:3px solid #fff;
		outline:#000 solid 1px;
		background:#000;
	}

方法二：使用 outline-offset属性 设置轮廓框架在 border 边缘外的偏移。

CSS：

#colorbox{
	width:50px;
	height:50px;
	outline:#000 solid 1px;
        outline-offset:3px;
	background:#000;
	}

补充：

outline经常会遇到的场景：去除按钮、输入框外部的蓝色线框。

设置：outline:none

注意：

1、Internet Explorer 不兼容 outline-offset属性

2、outline 不占用空间