迹忆客 专注技术分享

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。 在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 box-shadow CSS 属性而不是 outline 属性来设置轮廓的半径

我们可以使用 box-shadow CSS 属性而不是 outline 属性。 它的工作原理类似于 outline 属性。

我们已经创建了 <div> 元素，在下面的示例中它包含了一些文本。 此外，我们还向 <div> 元素应用了一些 CSS。

background 属性将为 <div> 元素设置背景颜色。 height 和 width CSS 属性分别用于设置元素的高度和宽度。

border-radius 属性将为 <div> 元素制作圆角，而 box-shadow 将为 <div> 应用阴影效果，这将用作轮廓。

这样，使用 box-shadow 和 border-radius 属性，我们可以为任何 HTML 元素创建圆角轮廓。

HTML 代码：

<div>Welcome to Jiyik!</div>

CSS 代码:

div{
    background: yellow;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    margin: 25px;
    padding: 20px;
    box-shadow: 0px 0px 0px 1px red inset;
}

使用CSS的after Selector设置轮廓的半径

用户可以使用 ::after 选择器和 border-radius 属性而不是默认的 outline CSS 属性来创建轮廓。 我们可以使用 border-radius 属性使 <div> 元素的角变圆。

在下面的示例中，我们创建了 <p> 元素并在其中添加了一些文本。 我们已经将 CSS 样式应用于 <p> 元素。

我们为 <p> 元素设置了背景、宽度、填充和颜色，以使其更具吸引力。 此外，我们还为 <p> 标签设置了 border-radius 以使其角变圆，并将 position 设置为 relative 以根据其当前位置添加其他元素。

之后，我们使用带有 <p> 标签的 ::after 选择器，它允许我们在 <p> 标签之后添加一些内容。 我们在此处的 <p> 元素之后添加了空文本。

此外，我们还为空文本设置了 border-radius 和 border。

我们已经根据

标签的位置设置了空文本边框的位置； 这就是我们使用 position: absolute 的原因。 为了将边框设置为轮廓，我们对顶部、底部、左侧和右侧 CSS 属性使用了 0 值，这就是边框作为轮廓的方式。

在这里，如果不使用 position: absolute 属性，我们就无法设置 top 、 bottom 、 left 和 right 的值。

HTML 代码：

<p>Hello Programmers!</p>

CSS 代码:

p{
    background: green;
    padding: 15px;
    border-radius: 5px;
    width: 300px;
    color: white;
    position: relative;
}
 p:after{
    content: "";
    display: block;
    border-radius: 5px;
    border: 2px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

使用 outline: auto 和 border-radius 属性一起设置轮廓的半径

使用 auto 作为 outline 属性的值允许我们显示自定义轮廓样式，包括圆角。

在此示例中，我们在 HTML 中创建了 <span> 元素并使用 CSS 应用了样式。 我们使用了 outline: auto CSS 属性和 border-radius 属性，它允许我们为轮廓制作圆角。

HTML 代码：

<span>Here is the Outline.</span>

CSS 代码:

span{
    outline: auto blue;
    border-radius: 8px;
    background-color: red;
}

从本文给出的方法来看，我们应该使用不同的 CSS 属性并制作自定义轮廓，而不是使用默认的 CSS 轮廓属性来为轮廓制作圆角。 我们可以对自定义大纲进行任何更改。