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

Detailed explanation of various join summaries of SQL

SQL Left Join, Right Join, Inner Join, and Natura...

About WSL configuration and modification issues in Docker

https://docs.microsoft.com/en-us/windows/wsl/wsl-...

Nodejs error handling process record

This article takes the connection error ECONNREFU...

MySQL scheduled task example tutorial

Preface Since MySQL 5.1.6, a very unique feature ...

MySQL obtains the current date and time function example detailed explanation

Get the current date + time (date + time) functio...

Detailed explanation of MySQL cluster: one master and multiple slaves architecture implementation

Experimental environment: 1. Three CentOS 7 serve...

Learn more about MySQL indexes

1. Indexing principle Indexes are used to quickly...

【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)

They are all web page templates from the foreign ...

How to install Docker on Windows Server 2016

Recently Microsoft released Windows Server 2016, ...

Tomcat obtains the client domain name of Nginx reverse proxy

question After Nginx reverse proxy, the Tomcat ap...

How to optimize MySQL group by statement

In MySQL, create a new table with three fields, i...

Detailed installation instructions for the cloud server pagoda panel

Table of contents 0x01. Install the Pagoda Panel ...

Vue implements sample code to disable browser from remembering password function

Find information Some methods found on the Intern...

Detailed tutorial for installing mysql5.7.18 on centos7.3

1 Check the Linux distribution version [root@type...

Quickly install MySQL5.7 compressed package on Windows

This article shares with you how to install the M...