Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the negative skills of CSS". In daily operation, I believe many people have doubts about the negative skills of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what are the negative skills of CSS?" Next, please follow the editor to study!

Use negative outline-offset to implement plus sign

Suppose we have a simple structure like this:

Div {width: 200px; height: 200px; outline: 20px solid # 000; outline-offset: 10px;}

Modify the outline-offset to an appropriate negative value, so that when appropriate, the outline border will be indented inward to a plus sign.

After an attempt, the outline-offset of the above div is modified to-118px.

Div {width: 200px; height: 200px; outline: 20px solid # 000; outline-offset:-118px;}

Add an animation effect, something like this:

CodePen Demo-- use outline to implement plus sign [1]

Interestingly, I tried a lot of different situations, and finally summed up a simple rule that there are some simple restrictions on using negative outline-offset to generate a plus sign:

The container has to be a square.

The width of the outline border itself cannot be too small.

The range of outline-offset negative value x is:-(half of container width + half of outline width)

< x < -(容器宽度的一半 + outline宽度) 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。大家最为熟知的就是负margin，使用负的 marign，可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢? 下文就再介绍一些 CSS 负值有意思的使用场景。 单侧投影 先说单侧投影，关于 box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下： OK，那如果要生成一个单侧的投影呢? 我们来看看 box-shadow 的用法定义： { box-shadow: none | [inset? && [ ? ? ? ] ]# } 以 box-shadow: 1px 2px 3px 4px #333 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。 这里有一个小技巧，扩张半径可以为负值。 继续，如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影： image CodePen Demo -- css单侧投影[2] 使用 scale(-1) 实现翻转 通常，我们要实现一个元素的 180° 翻转，我们会使用 transform: rotate(180deg)，这里有个小技巧，使用 transform: scale(-1) 可以达到同样的效果。看个 Demo： CSS Nagative Scale(-1) .scale { transform: scale(1); animation: scale 10s infinite linear; } @keyframes scale{ 50% { transform: scale(-1); } 100% { transform: scale(-1); } } 看看效果： (GIF 中第一行是使用了 transform: rotate(180deg) 的效果) CodePen Demo -- 使用 scale(-1) 实现元素的翻转[3] 使用负 letter-spacing 倒序排列文字 与上面 scale(-1) 有异曲同工之妙的是负的 letter-spacing。 letter-spacing 属性明确了文字的间距行为，通常而言，除了关键字 normal，我们还可以指定一个大小，表示文字的间距。像这样： 倒序排列文字 .letter_spacing { font-size: 36px; letter-spacing: 0px; animation: move 10s infinite; } @keyframes move { 40% { letter-spacing: 36px; } 80% { letter-spacing: -72px; } 100% { letter-spacing: -72px; } } 我们设置文字的 letter-spacing 从 0 ->

36px->-72px, observe the different changes:

CodePen Demo-negative letter-spacing reverse text [4]

However, due to the influence of mixed arrangement of Chinese and English or different fonts, as well as the arrangement after the reverse order, it is not recommended to use this way to arrange the text in reverse order.

Use negative values of transition-delay and animation-delay to start animation immediately

We know that CSS animation and transitions provide a delay property that can delay the animation.

Consider the following animation:

The simple code looks something like this:

.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 {transform: rotate (360deg) translate (- 80px, 0);}}

If we want to get rid of this delay, we hope that as soon as we enter the page, the three balls will move at the same time. At this time, you only need to change the positive animation-delay to the negative one.

.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;}

Here, there is a trick. An animation with a negative animation-dealy value will be executed immediately, starting at one of its animation stages. So, at the beginning of the animation is as follows:

Take the above animation as an example, an animation that is defined to execute for 3s, if the animation-delay is-1s, the starting point is equivalent to the position of 2s (3-1) during normal execution.

CodePen Demo-- use negative animation-delay to perform animation in advance [5]

Negative margin

Negative margin is widely used in CSS, and the outer margin of elements can be set to negative values.

Before the flexbox layout specification was in vogue, it took some work to achieve a multi-line and contour layout. One way is to use positive padding and negative margin cancellation.

There is a layout as follows:

The contents of the left and right columns are uncertain, that is, highly unknown. However, it is hoped that the height of the two columns will always remain the same, regardless of whether there is more content on the left or more on the right.

OK, one of the Hack methods is to fill the left and right columns with a large positive padding and the same negative margin:

. g-left {... Padding-bottom: 9999px; margin-bottom:-9999px;}. G-right {. Padding-bottom: 9999px; margin-bottom:-9999px;}

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

The specific code can be seen here: CodePen Demo-positive padding negative margin to achieve multi-column contour layout [6]

At this point, the study of "what are the negative skills of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.