Using the outline-offset property in CSS to implement a plus sign

Using the outline-offset property in CSS to implement a plus sign

Assume there is such an initial code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            padding: 0;
            width: 200px; 
            height: 200px;
            background-color: green;
            outline: 20px solid #000;
            outline-offset: 10px;
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The effects are as follows:

Then change the value of the outline-offset property to -118px, and the border will become a plus sign. Of course, in order to make the effect more significant, I added an animation effect to show it, as shown in the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            padding: 0;
            width: 200px; 
            height: 200px;
            background-color: green;
            outline: 20px solid #000;
            animation: move 3s infinite;

}   
@keyframes move {
    0% {
        outline-offset: 10px;
    }

    100% {
        outline-offset: -118px;
    }
}     
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The effects are as follows:

Use outline-offset to make a plus sign summary

I find this very interesting. I tried it many times here. Here I summarize the conditions for using negative values ​​of the outline-offset property:

  • The container must be a square
  • The width of the outline border itself cannot be too small
  • The value range of outline-offset negative value x is: -(half the container width + half the outline width) < x < -(half the container width + outline width)

After this example, I thought again that there are many CSS properties and places where they can take negative values, and there are also many unexpected effects. The most well-known one is negative margin. Using negative margin, you can achieve similar multi-column equal height layout, vertical centering, etc. Are there any other interesting techniques for using negative values?

The following article introduces some interesting usage scenarios of CSS negative values.

Use scale(-1) to achieve flip

Usually, if we want to achieve a 180° flip of an element, we will use transform: rotate(180deg) . Here is a little trick. Using transform: scale(-1) can achieve the same effect. See a Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .g_container {
            position: absolute;
            margin: 100px 0 0 500px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            border-radius: 50%;
        }
       .item {
    transform: rotate(0) translate(-80px, 0) ;
}

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite 1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite 2s linear;
}


@keyframes rotate {
    100% {
        transform: rotate(360deg) translate(-80px, 0) ;
    }
}

    </style>
</head>
<body>
    <div class="g_container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

See the effect:

Of course, if you want to make the three balls move at the same time and remove the delay, you can change the code to this:

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}

.item:nth-child(2) {
    animation: rotate 3s infinite -1s linear;
}

.item:nth-child(3) {
    animation: rotate 3s infinite -2s linear;
}

I won't talk about the effect, it's just simultaneous movement, you can refer to the effect above

Negative margin

Negative margin is widely used in CSS. The margin of an element can be set to a negative value.

Before the flexbox layout specification became popular, it still took some effort to achieve multi-line equal-height layout. One way is to use the method of canceling out positive padding and negative margin.

There is a layout as follows:

The contents of the left and right columns are uncertain, that is, highly unknown. But I hope that no matter there is more content on the left or on the right, the height of the two columns will always remain the same.

OK, one hack is to use a large positive padding and the same negative margin to fill the left and right columns:

.left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

It can be achieved that no matter how the height of the left and right columns changes, the lower column will change with the other column.

To sum up

In addition to these, there are many more properties, examples of which are not listed here (due to the author's limited level and time), for example:

  • Use negative margin to center an element horizontally and vertically
  • Use negative marign to hide the extra borders at the beginning and end of the list li
  • Use negative text-indent to hide text
  • Use negative z-index to participate in stacking context ordering

Summarize

This is the end of this article about using the outline-offset property in CSS to implement the plus sign. For more related CSS outline-offset property content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Solution to the problem of saving format in HTML TextArea

>>:  A brief discussion on how to use slots in Vue

Recommend

Vue implements chat interface

This article example shares the specific code of ...

How to install Apache service in Linux operating system

Download link: Operating Environment CentOS 7.6 i...

How to remove the dividing line of a web page table

<br />How to remove the dividing lines of a ...

The HTML 5 draft did not become a formal standard

<br />Yesterday I saw at W3C that the new HT...

Example of how to import nginx logs into elasticsearch

The nginx logs are collected by filebeat and pass...

Alibaba Cloud OSS access rights configuration (RAM permission control) implementation

Scenario You need to authorize the tester to use ...

Instructions for using the meta viewport tag (mobile browsing zoom control)

When OP opens a web page with the current firmwar...

MYSQL implements ranking and querying specified user ranking function (parallel ranking function) example code

Preface This article mainly introduces the releva...

Will CSS3 really replace SCSS?

When it comes to styling our web pages, we have t...

3 functions of toString method in js

Table of contents 1. Three functions of toString ...

Detailed explanation of the use of filter properties in CSS3

Recently, when I was modifying the intranet porta...

Call js function or js variable in html's img src="" to dynamically specify the image path

I have found a lot of online resources on this pro...

Mysql query database capacity method steps

Query the total size of all databases Here’s how:...

Summary of the deployment of Tomcat cluster and Nginx load balancing based on Docker

Table of contents Written in front 1. Ngixn image...

Boundary and range description of between in mysql

mysql between boundary range The range of between...