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

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

Write a formal blog using XHTML CSS

How to configure MySQL scheduled tasks (EVENT events) in detail

Understand the principles of MySQL persistence and rollback in one article

Detailed explanation of the function and usage of keepAlive component in Vue

js and jquery to achieve tab status bar switching effect

Detailed explanation of MySQL multi-table join query

Detailed tutorial on installing MySQL 5.7.20 on RedHat 6.5/CentOS 6.5

How to quickly deploy Redis as a Docker container

Detailed explanation of MySql view trigger stored procedure

Input file custom button beautification (demo)

Recommend

The use and difference between vue3 watch and watchEffect

Detailed explanation of the six common constraint types in MySQL

Win10 DVWA download, installation and configuration graphic tutorial detailed explanation (novice learning penetration)

Implementing WeChat tap animation effect based on CSS3 animation attribute

Core skills that web front-end development engineers need to master

Alibaba Cloud ECS Server Getting Started Process (Must-Read Tutorial for Newbies)

Use iptables and firewalld tools to manage Linux firewall connection rules

Solve the problem that images and other resources are automatically deleted after Tomcat is redeployed

Linux system file sharing samba configuration tutorial

Implementation of installing Docker in win10 environment

CSS3 to achieve simple white cloud floating background effect

Summary of MySQL development standards and usage skills

AsyncHooks asynchronous life cycle in Node8

Discussion on the numerical limit of the ol element in the html document

MySQL 8.0.21 installation and configuration method graphic tutorial