使用 outline-offset 屬性實作加号
假設有這麼一個初始代碼:
<!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> 其效果如下:
然後再把這個outline-offset屬性的值改為-118px,那麼就會把邊框變成一個加号
當然我這裡為了效果顯著一些,我加了一個動畫效果來顯示,如下代碼:
<!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> 使用outline-offset做加号的總結
我覺得這個很有意思,在這裡我試了很多次,在這裡我總結了一下使用outline-offset屬性負值的條件：
- 容器必須是個正方形
- outline 邊框本身的寬度不能太小
- outline-offset 負值 x 的取值範圍為: -(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)
-
- *
在這個例子後，我又在想，CSS 屬性可以取負值的屬性和地方有很多,也有許多意想不到的效果。大家最為熟知的就是負margin，使用負的 marign，可以用來實作類似多列等高布局、垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢？
下文就再介紹一些 CSS 負值有意思的使用場景。
使用 scale(-1) 實作翻轉
通常，我們要實作一個元素的 180° 翻轉，我們會使用
transform: rotate(180deg)
，這裡有個小技巧，使用
transform: scale(-1)
可以達到同樣的效果。看個 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> 看看效果：
當然,如果想要讓三個球同時運動,去掉這個延遲,那麼可以改成這樣的代碼:
.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;
} 其效果我就不說了,就是同時運動,可參照上面的那個效果
負值 margin
負值 margin 在 CSS 中算是運用的比較多的，元素的外邊距可以設定為負值。
在 flexbox 布局規範還沒流行之前，實作多行等高布局還是需要下一番功夫的。其中一種方法便是使用正 padding 負 margin 相消的方法。
有如下一個布局：
左右兩欄的内容都是不确定的，也就是高度未知。但是希望無論左側内容較多還是右側内容較多，兩欄的高度始終保持一緻。
OK，其中一種 Hack 辦法便是使用一個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄：
.left {
...
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right {
...
padding-bottom: 9999px;
margin-bottom: -9999px;
} 可以做到無論左右兩欄高度如何變化，高度較低的那一欄都會随着另外一欄變化。
總結一下
除了這些,還有很多的屬性,例子沒有列出來(因作者的水準和時間有限)，例如：
- 使用負 marign 實作元素的水準垂直居中
- 使用負 marign隐藏清單 li 首尾多餘的邊框
- 使用負 text-indent 實作文字的隐藏
- 使用負的 z-index 參與層疊上下文排序
還有一些很深奧的，譬如張鑫旭大大在 CSS 大會上分享的，利用負的 opacity 在 CSS 中實作了僞條件判斷，配合 CSS 自定義屬性，使用純 CSS 實作 360° 的餅圖效果：
- 第五屆CSS大會主題分享之CSS創意與視覺表現 另外,我想說一下,css雖然簡單,但是他的功能真的很強大,強大到隻有你做不到的,沒有你想不到的
多創新,多動手,發現程式設計世界的更多的樂趣和奧秘.
最後的總結
額，即使css屬性的負值在很多時候很有用,能開闊您對代碼的新的了解，但是在某些時候也會帶來很多的麻煩,也就是使用的場景,在使用它的時候要注意一下。有的時候看到這些代碼不得不好好捋一捋才能緩過神來，再感歎一句，原來如此。
如果有其他更好的更易了解的實作方式，具體使用實作的時候應該好好權衡一下。
好了，本文到此結束，希望對你有幫助 :)
注:如果本文有什麼錯誤的話,也歡迎大家評論,讨論哦,知識最重要嘛.
最最後,還希望各位愛好web前端,或者是看了我的文章而喜歡web程式設計的同志們(有點自戀)可以給個關注,不迷路哦.我會不斷更新關于web前端這塊的所有知識,不隻是css.可以一起讨論,一起學習嘛.
當然,最後還希望大家進入我的web前端交流群哦(qq),大家一起可以讨論交流.有什麼問題,疑問,都可以在群裡發起.隻有多個思想的碰撞,才會得到一個正确,甚至比正确更正确的一個"答案(好處)".
歡迎大家加入哦(直接點選這個連結)
1055351817![Docker：安裝Docker Compose[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)