之前在知乎看到一個很有意思的討論 一行代碼可以做什么？
那么，一行 CSS 代碼又能不能搞點事情呢？
CSS Battle
首先，這讓我想到了，年初的時候沉迷的一個網站 CSS Battle ，這個網站是核心玩法就是：
官方給出一張圖形，在給定的 400 x 300 的畫布上，能夠用越短的代碼實作它，分數就越高，
注意是，完全一模一樣還原，
其中，第一題就非常有趣，看看題目：
嗯，想一想，如果給定這樣一張圖形，告訴你 HTML 的大小是 400px x 300px，圖片中使用到的顏色是 #5D3A3A, #B5E0BA，你會怎么用 CSS 去實作它呢？
因為要求，字符數越少，分數越高，當然是選字符少的標簽，是不是這樣：
<p>
<style>
body{background:#5D3A3A;}
p {width: 200px;height:200px;background:#B5E0BA;}
</style>
這個網站的設定，HTML 和 CSS 可以按照上述格式寫在一起，
<style>標簽內的即為 CSS，之外的是 HTML ，標簽<p></p>可以簡寫為<p>
額，這樣當然可以，但是看看文章的標題，一行 CSS ？這明顯不是啊，并且這里有 100+ 個字符，我們得把字符數壓一壓，
嗯嗯嗯，想到了陰影，嘗試下使用 box-shadow：
<a>
<style>
a {
box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a;
}
</style>
利用兩層陰影，完美實作圖例圖形，并且，字符數壓縮到了 82 個，當然，這還不是極致，我們完全可以行內 CSS，再減少字符數：
<a style="box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a">
只有 62 個字符，當然，從一行代碼的角度，這個問題完美的解決了，如果追求極致的字符數，上述的代碼還可以再簡化一下：
<a style=box-shadow:0+0+0+200px#b5e0ba,0+0+0+5in#5d3a3a>
這里有一些小知識點，HTML5 支持屬性后面不用引號包住，又譬如
box-shadow: 0 0 0 400px #5d3a3a是可以壓縮到box-shadow:0+0+0+5in#5d3a3a，CSS 中1in=96px，但是畫布只有 400px，5in 大于 400px，也沒有問題，能夠充滿畫布，但是400px相對5in字符多了 2 個，
瀏覽器里面看一下，這個是完全正確的寫法：
OK，最終只有 56 個字符，完美，當然，CSS Battle 里面還有更多更復雜的挑戰，也有很多能夠通過一行代碼實作的，感興趣的嘗試下，
一行背景代碼
要說到 CSS 最有意思的屬性，我覺得背景（background）肯定能夠獲得很多選票，背景分為：
- 純色
- 線性漸變(
linear-gradient) - 徑向漸變(
radial-gradient) - 角向漸變(
conic-gradient) - 多重線性漸變(
repeating-linear-gradient) - 多重徑向漸變(
repeating-radial-gradient) - 多重角向漸變(
repeating-conic-gradient)
突出一個字，離譜，并且它們還可以互相混合、疊加添加濾鏡、配合各種背景相關屬性等等等，
不過今天，來看看一行 CSS Background 代碼能玩出什么花來，嗯？這里的主角是多重角向漸變(repeating-conic-gradient)，只用一行 CSS 代碼：
{
background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}
這什么玩意？腦補一下，這行代碼繪制出來的圖形會是什么樣子？看看：
Wow，不可思議，這里 0.1deg 非常關鍵，這里的角度越小（小于 1deg 為佳），圖形越酷炫，
我們把 0.1deg 替換成 30deg 看看：
當然也非常好看，只不過沒有上面那個那么驚艷，
CodePen -- One Line CSS Pattern
我們可以再利用 CSS - Doodle，隨機產生這份美：
CSS - Doodle 它是一個基于 Web-Component 的庫，允許我們快速的創建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函式（隨機、回圈等等），讓我們能通過一套規則，得到不同 CSS 效果，
沒錯，它的本質其實就是上述的那一行核心 CSS 代碼，
CSS Doodle - CSS Magic Conic-gradient
margin: auto 與 place-items: center
這個也非常有意思，當然，它不算嚴格意義上的一行 CSS，因為需要搭配其他屬性一起使用，
最快水平垂直居中一個元素的方法是什么？
水平垂直居中也算是 CSS 領域最為常見的一個問題了，不同場景下的方法也各不相同，各有優劣，嗯，下面這兩種方法應該算是最便捷的了：
方法一：flex 布局下的 margin: auto
<div >
<div ></div>
</div>
.g-container {
display: flex;
}
.g-box {
margin: auto;
}
上面的
display: flex替換成display: inline-flex | grid | inline-grid也是可以的，
在 display: flex 布局下， margin auto 的生效不僅是水平方向，垂直方向也會自動去分配這個剩余空間，
CodePen Demo -- 使用 margin auto 水平垂直居中元素
如果你對非常有用的 margin: auto 還不是很了解，可以看看：探秘 flex 背景關系中神奇的自動 margin
方法二：grid 布局下的 place-items: center
直接上代碼：
.g-container {
display: grid;
place-items: center
}
上述兩個份代碼效果都是一樣的：
CodePen Demo -- 水平垂直居中元素 grid+ place-items: center
最后
一行 CSS 能干什么？肯定不止這些，當然，這不就是 CSS 的樂趣么，
好了，本文到此結束，希望對你有幫助 :)
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/245595.html
標籤：Html/Css