整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
我們閱讀這篇文章之前，我們需要思考下，我們?yōu)槭惨チ私釹VG，閱讀了這篇文章是否可以給我們帶來(lái)幫助。
1. 如果你想要一張 css或者JavaScript可以控制的圖片，那么你可以考慮SVG。
2. 如果你期望圖片的質(zhì)量不會(huì)因?yàn)榉糯蠡蚩s小而降低，那么你可以考慮SVG。
3. 如果你期望網(wǎng)頁(yè)對(duì)殘障人士和視力受損的用戶有更好的體驗(yàn)，那么你可以考慮SVG。
4. 如果你期望圖片在高清設(shè)備還是低分辨率設(shè)備上，都能保持清晰和細(xì)膩的圖像質(zhì)量，那么你可以考慮SVG。
我們?cè)趯W(xué)習(xí)SVG之前，需要先了解一下位圖和矢量圖。
簡(jiǎn)單來(lái)說(shuō)：
詳細(xì)來(lái)說(shuō)：
SVG究竟什么？
是Scalable Vector Graphics的縮寫，意思是可縮放矢量圖形。
這是一種基于XML的二維矢量圖形標(biāo)準(zhǔn)，由W3C開(kāi)發(fā)的。
對(duì)于初學(xué)者來(lái)說(shuō)，可以將SVG理解為一套新的HTML標(biāo)簽。
所以我們可以使用css和JavaScript來(lái)對(duì)標(biāo)簽進(jìn)行操作。
很多小伙伴可能已經(jīng)忘記了XML，我們回顧一下：
XML(可擴(kuò)展標(biāo)記語(yǔ)言)是一種用于描述數(shù)據(jù)的標(biāo)記語(yǔ)言，它使用一系列簡(jiǎn)單的標(biāo)記來(lái)描述數(shù)據(jù)，這些標(biāo)記可以用來(lái)表示不同類型的數(shù)據(jù)元素，如標(biāo)題，作者，價(jià)格等。
SVG的優(yōu)勢(shì)：
SVG的劣勢(shì)：
設(shè)計(jì)復(fù)雜性：SVG需要具備一定的設(shè)計(jì)和制作技巧，與位圖相比，SVG的設(shè)計(jì)難度較大，需要更高的技術(shù)水平。
瀏覽器兼容性：在一些舊版瀏覽器中，可能存在對(duì)SVG的兼容性問(wèn)題。
渲染速度：SVG復(fù)雜度過(guò)高會(huì)降低頁(yè)面渲染速度。
對(duì)于前端開(kāi)發(fā)的我們，要如何去使用SVG呢？
SVG歸根結(jié)底來(lái)說(shuō)和JPG，PNG一樣，也是一種圖像格式，所以我們可以在HTML中，將SVG的路徑設(shè)置為<img>的src屬性。
我們也可以將SVG的代碼放在HTML中，我們完全可以把SVG的代碼看做成我們的HTML標(biāo)簽。
例如：
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
</svg>
我們也可以通過(guò)css的background-image或者偽元素，將SVG圖片作為背景圖像。
總的來(lái)說(shuō)，任何需要保持清晰度，動(dòng)態(tài)交互和無(wú)損縮放的圖形場(chǎng)景，都可以考慮使用SVG。
Canvas和SVG都是用于在網(wǎng)頁(yè)上繪制圖形的工具，但它們?cè)谠S多方面都存在顯著的差異。以下是對(duì)Canvas和SVG的對(duì)比：
總結(jié)：Canvas和SVG各有其優(yōu)勢(shì)和適用場(chǎng)景。Canvas更適合圖像密集型的游戲和需要高效渲染的應(yīng)用，而SVG更適合處理矢量圖形和大型渲染區(qū)域。
說(shuō)了這么多，我們來(lái)開(kāi)始實(shí)戰(zhàn)，我們要在HTML中，畫出一個(gè)SVG圖像。
<html>
<body>
<h1>Feng SVG</h1>
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
</svg>
</body>
</html>
運(yùn)行后：
代碼解讀：
我們還可以在線設(shè)計(jì)SVG圖片，我們可以直接使用該圖片或者拷貝其代碼復(fù)制到我們的代碼中。
SVG在線編輯： c.runoob.com/more/svgedi…
示例一：
正常的矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在SVG圖像中繪制一個(gè)寬度為300像素、高度為100像素、填充顏色為黃色調(diào)、線條寬度為2像素、線條顏色為黑色的矩形。
示例二：
填充和邊框的透明度
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)SVG圖像中繪制一個(gè)左上角坐標(biāo)為(50, 20)、寬度為150像素、高度為150像素、填充顏色為藍(lán)色、線條顏色為紅色、線條寬度為5像素、填充透明度和線條透明度都為0.5的矩形。
示例三：
整個(gè)元素的透明度
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)500x500像素的SVG圖像中繪制一個(gè)左上角坐標(biāo)為(50, 20)、寬度為150像素、高度為150像素、填充顏色為藍(lán)色、線條顏色為粉紅色、線條寬度為5像素、透明度為0.4的矩形。
示例四：
圓角矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<rect x="50" y="20" rx="20" ry="20" width="150" height="160" style="fill:red;stroke:black;stroke-width:1;opacity:0.5" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)500x500像素的SVG圖像中繪制一個(gè)左上角坐標(biāo)為(50, 20)、寬度為150像素、高度為160像素、填充顏色為紅色、線條顏色為黑色、線條寬度為1像素、透明度為0.5的圓角矩形。
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)SVG圖像中繪制一個(gè)圓心坐標(biāo)為(100, 50)、半徑為40像素、邊框顏色為紅色、邊框?qū)挾葹?像素、填充顏色為藍(lán)色的圓形。
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)500x500像素的SVG圖像中繪制一個(gè)中心點(diǎn)坐標(biāo)為(300, 80)、長(zhǎng)軸半徑為100像素、短軸半徑為50像素的紅色橢圓，線條顏色為紫色，線條寬度為2像素。
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:5" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)SVG圖像中繪制一條從(0, 0)到(200, 200)的黑色線段，線條寬度為5像素。
示例一：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,10 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)SVG圖像中繪制一個(gè)黑色的折線。這個(gè)折線有6個(gè)點(diǎn)，形狀大致為一個(gè)不規(guī)則的六邊折線。注意：因?yàn)樵O(shè)置了fill:none，所以該多邊形線段不會(huì)進(jìn)行填充，只顯示其黑色邊框。
示例二：
畫一個(gè)五角星
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)300x300像素的區(qū)域內(nèi)繪制一個(gè)藍(lán)色的多邊形。這個(gè)多邊形有5個(gè)頂點(diǎn)，形狀大致為一個(gè)不規(guī)則的五邊形。
示例一：
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:red;stroke:purple;stroke-width:1"/>
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)500x210像素的SVG圖像中繪制一個(gè)由三個(gè)頂點(diǎn)定義的多邊形，填充顏色為紅色，線條顏色為紫色，線條寬度為1像素。
示例二：
畫一個(gè)五角星
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:5"/>
</svg>
效果：
代碼解析:
綜上，這段代碼會(huì)在一個(gè)300x300像素的SVG圖像中繪制一個(gè)由七個(gè)頂點(diǎn)定義的多邊形，沒(méi)有填充顏色，線條顏色為黑色，線條寬度為5像素。
路徑數(shù)據(jù)：
示例：
畫一個(gè)三角形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L205 270 Z" />
</svg>
效果：
代碼解析:
綜上，這段代碼將在SVG圖像中繪制一個(gè)由三個(gè)直線段組成的封閉圖形，其頂點(diǎn)坐標(biāo)分別為(150, 0)，(75, 200)和(205, 270)。
直接在元素屬性上設(shè)置樣式，比如將矩形填充色改成粉紅
<svg width="400" height="400" style="border: 1px solid red;">
<rect
x="100"
y="100"
width="200"
height="100"
fill="pink"
/>
</svg>
把所有樣式寫在 style 屬性里
<svg width="400" height="400" style="border: 1px solid red;">
<rect
x="100"
y="100"
width="200"
height="100"
style="fill: pink;"
/>
</svg>
將樣式寫在 <style> 標(biāo)簽里
<style>
.rect {
fill: pink;
}
</style>
<svg width="400" height="400" style="border: 1px solid red;">
<rect
x="100"
y="100"
width="200"
height="100"
class="rect"
/>
</svg>
將樣式寫在 .css 文件里，然后在頁(yè)面中引入該 CSS 文件。
SVG動(dòng)畫可以通過(guò)多種方式實(shí)現(xiàn)，包括使用SMIL、CSS和JavaScript。
能讓SVG不靠JavaScript與CSS就能動(dòng)起來(lái)是因?yàn)槭褂昧薙MIL（Synchronized Multimedia Integration Language），是W3C的標(biāo)準(zhǔn)之一，旨在以XML格式提供多媒體的交互表現(xiàn)（白話點(diǎn)其實(shí)就是動(dòng)畫），是Web上動(dòng)畫的開(kāi)路先鋒，啟發(fā)了Web animation與CSS animation。SVG與SMIL的開(kāi)發(fā)團(tuán)隊(duì)合作，讓SVG能利用SMIL達(dá)到如下效果：
光是這些特性就夠我們組合出很多種的動(dòng)畫了， 使用方法也不難，只要在SVG元素內(nèi)置入以下四種元素即可操作動(dòng)畫：
例如：
<circle cx=“56.7573”cy=“92.8179”r=“2”fill=“black”stroke=“black”stroke-width=“1”>
<set attributeName=“cy”to=“105.7318”begin=“2s”/>
</circle>
代碼解析：
這段代碼用于描述一個(gè)圓形，并在特定時(shí)間改變其中心點(diǎn)的y坐標(biāo)。
綜上，這段代碼繪制了一個(gè)半徑為2單位、填充和邊框顏色均為黑色的圓形，并設(shè)置了一個(gè)動(dòng)畫，使圓心的y坐標(biāo)在2秒后從92.8179變?yōu)?05.7318。
通過(guò)設(shè)置一組 CSS 樣式和關(guān)鍵幀，可以實(shí)現(xiàn)基于時(shí)間或基于事件的 SVG 動(dòng)畫。這種方式實(shí)現(xiàn)的 SVG 動(dòng)畫相對(duì)簡(jiǎn)單，具有易于實(shí)現(xiàn)、可讀性好、易于維護(hù)、性能良好等優(yōu)點(diǎn)。
下面是一個(gè)基于 CSS 的 SVG 動(dòng)畫示例，實(shí)現(xiàn)了一個(gè)圓形的旋轉(zhuǎn)動(dòng)畫：
<svg>
<circle cx="50" cy="50" r="40" />
</svg>
<style>
circle {
fill: red;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
</style>
通過(guò) JavaScript，可以對(duì) SVG 圖形進(jìn)行更加自由和復(fù)雜的動(dòng)畫操作。JavaScript 可以對(duì) SVG 元素的各種屬性，如位置、大小、顏色、透明度、路徑等進(jìn)行操作，配合定時(shí)器和事件監(jiān)聽(tīng)等方法，實(shí)現(xiàn)豐富多彩的 SVG動(dòng)畫。
下面是一個(gè)基于 JavaScript 的 SVG 動(dòng)畫示例，實(shí)現(xiàn)了一個(gè)小球自由落體，碰撞彈跳的效果：
<svg>
<circle id="ball" cx="50" cy="50" r="20" />
</svg>
<script>
let ball=document.querySelector("#ball");
let startPos=50;
let endPos=200;
let speed=3; // 設(shè)置球下落速度
let gravity=0.2; // 設(shè)置加速度
function moveBall() {
let pos=parseFloat(ball.getAttribute("cy"));
let vel=parseFloat(ball.getAttribute("data-vel")) || 0;
// 計(jì)算球的速度和位置
vel +=gravity;
pos +=vel * speed;
// 碰撞檢測(cè)
if (pos + 20 > endPos) {
pos=endPos - 20;
vel=-vel * 0.8;
}
// 更新球的位置和速度
ball.setAttribute("cy", pos);
ball.setAttribute("data-vel", vel);
// 循環(huán)移動(dòng)球
if (pos < endPos - 20) {
window.requestAnimationFrame(moveBall);
}
}
moveBall();
</script>
總的來(lái)說(shuō)，SVG是一種強(qiáng)大的圖形描述語(yǔ)言，具有可縮放性、交互性、可訪問(wèn)性、靈活性和跨平臺(tái)兼容性等特點(diǎn)和優(yōu)勢(shì)。它可以用于創(chuàng)建各種復(fù)雜的二維矢量圖形和富交互的Web應(yīng)用，為Web設(shè)計(jì)和開(kāi)發(fā)提供了更多的可能性。
隨著Web技術(shù)的不斷發(fā)展，相信SVG的應(yīng)用范圍還將不斷擴(kuò)大。
原文鏈接：https://juejin.cn/post/7322344486159106100
端訓(xùn)練營(yíng)：1v1私教，終身輔導(dǎo)計(jì)劃，幫你拿到滿意的 offer。 已幫助數(shù)百位同學(xué)拿到了中大廠 offer。歡迎來(lái)撩~~~~~~~~
Hello，大家好，我是 Sunday。
當(dāng)各種框架以及復(fù)雜的 JS 知識(shí)開(kāi)始充斥著我們的工作環(huán)境時(shí)。誰(shuí)還能夠記得，以 CSS 來(lái)構(gòu)建更加良好的用戶體驗(yàn)，也是前端的一個(gè)重要組成部分。
所以說(shuō)，今天咱們就來(lái)看看 css 的優(yōu)化方案-終極合集。一共一百條，有點(diǎn)多，適合收藏（點(diǎn)個(gè)贊和分享自然更好了）
添加scroll-behavior：smooth到元素中<html>，使整個(gè)頁(yè)面能夠平滑滾動(dòng)。
html{
scroll-behavior: smooth;
}
此選擇器以href屬性以“https”開(kāi)頭的鏈接為目標(biāo)。
a[href^="https"] {
color: blue;
}
選擇作為<h2>同級(jí)元素的所有<p>元素。
h2 ~ p {
color: blue;
}
此選擇器將樣式應(yīng)用于不具有類“Special”的 li。
li:not(.special) {
font-style: italic;
}
使用視區(qū)單位(vw, vh, vmin, vmax)可以使字體大小與視區(qū)大小相對(duì)應(yīng)。
h1 {
font-size: 5vw;
}
此選擇器以空的<p>元素為目標(biāo)并隱藏它們。
p:empty {
display: none;
}
可以定義和使用自定義特性，以便更輕松地創(chuàng)建主題和進(jìn)行維護(hù)。
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
object-fit 控制替換元素(如<img>)的內(nèi)容應(yīng)該如何調(diào)整大小。
img {
width: 100px;
height: 100px;
object-fit: cover;
}
Css網(wǎng)格提供了一種功能強(qiáng)大的方式來(lái)以更直接的方式創(chuàng)建布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
如果一個(gè)元素包含任何帶有:focus的子元素，則:focus-Win會(huì)選擇該元素。
form:focus-within {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
使用FlexBox可輕松地將內(nèi)容在容器中水平和垂直居中。
.container {
display: flex;
align-items: center;
justify-content: center;
}
自定義在網(wǎng)頁(yè)上選擇文本時(shí)的突出顯示顏色。
::selection {
background-color: #ffcc00;
color: #333;
}
設(shè)置輸入字段內(nèi)占位符文本的樣式。
::placeholder {
color: #999;
font-style: italic;
}
使用Backback-Clip屬性創(chuàng)建漸變邊框。
.element {
border: 2px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(to right, red, blue);
}
根據(jù)視口寬度調(diào)整字體大小，實(shí)現(xiàn)更加響應(yīng)式的排版。
body {
font-size: calc(16px + 1vw);
}
利用錐形漸變創(chuàng)建豐富多彩且動(dòng)態(tài)的背景。
.element {
background: conic-gradient(#ff5733, #33ff57, #5733ff);
}
使用clamp()函數(shù)設(shè)置字體大小的范圍，確保在不同屏幕尺寸下的可讀性。
.text {
font-size: clamp(16px, 4vw, 24px);
}
使用font-display: swap;屬性提高網(wǎng)頁(yè)字體性能，讓自定義字體加載時(shí)顯示備用字體。
@font-face {
font-family: 'YourFont';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}
為了實(shí)現(xiàn)更順暢的滾動(dòng)體驗(yàn)，特別是在圖庫(kù)或滑塊中，實(shí)現(xiàn)自定義滾動(dòng)吸附點(diǎn)。
.scroll-container {
scroll-snap-type: y mandatory;
}
.scroll-item {
scroll-snap-align: start;
}
利用可變字體和font-variation-settings屬性對(duì)字體的粗細(xì)、樣式等進(jìn)行精細(xì)調(diào)節(jié)。
.text {
font-family: 'YourVariableFont', sans-serif;
font-variation-settings: 'wght' 500, 'ital' 1;
}
使用border-bottom和text-decoration的組合來(lái)自定義鏈接的下劃線樣式。
a {
text-decoration: none;
border-bottom: 1px solid #3498db;
}
使用class sr-only來(lái)在視覺(jué)上隱藏元素，但保持其對(duì)屏幕閱讀器的可訪問(wèn)性。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
通過(guò)使用padding來(lái)保持元素（如圖片或視頻）的縱橫比。
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 75%; /* 根據(jù)需要調(diào)整 */
}
.aspect-ratio-box > iframe {
position: absolute;
width: 100%;
height: 100%;
}
使用:nth-child偽類來(lái)為交替元素設(shè)置樣式。
li:nth-child(even) {
background-color: #f2f2f2;
}
li:nth-child(odd) {
background-color: #e6e6e6;
}
使用counter-reset和counter-increment屬性在列表中創(chuàng)建自動(dòng)編號(hào)。
ol {
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
}
使用不同屬性為元素應(yīng)用多個(gè)背景圖片。
.bg {
background-image: url('image1.jpg'), url('image2.jpg');
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-x;
}
通過(guò)使用hyphens屬性允許自動(dòng)連字符以提高文本的可讀性。
p {
hyphens: auto;
}
利用CSS變量創(chuàng)建動(dòng)態(tài)且可重用的樣式。
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}
改善焦點(diǎn)樣式以提高鍵盤導(dǎo)航和可訪問(wèn)性。
:focus {
outline: 2px solid #27ae60;
}
為漸變背景應(yīng)用平滑過(guò)渡效果，增強(qiáng)視覺(jué)效果。
.gradient-box {
background: linear-gradient(45deg, #3498db, #2ecc71);
transition: background 0.5s ease;
}
.gradient-box:hover {
background: linear-gradient(45deg, #e74c3c, #f39c12);
}
為文本添加描邊，產(chǎn)生獨(dú)特的視覺(jué)效果。
h1 {
color: #3498db;
-webkit-text-stroke: 2px #2c3e50;
}
創(chuàng)建一個(gè)簡(jiǎn)單的漢堡菜單，無(wú)需使用JavaScript。
.menu-toggle {
display: none;
}
.menu-toggle:checked + nav {
display: block;
}
/* 在這里添加漢堡菜單圖標(biāo)和菜單樣式 */
使用:is()偽類簡(jiǎn)化復(fù)雜的選擇器。
:is(h1, h2, h3) {
color: blue;
}
在CSS變量中進(jìn)行計(jì)算，實(shí)現(xiàn)動(dòng)態(tài)樣式。
:root {
--base-size: 16px;
--header-size: calc(var(--base-size) * 2);
}
h1 {
font-size: var(--header-size);
}
使用attr
()函數(shù)檢索和顯示屬性值。
div::before {
content: attr(data-custom-content);
}
為圖像應(yīng)用遮罩，創(chuàng)造出獨(dú)特的效果。
.masked-image {
mask: url(mask.svg);
mask-size: cover;
}
嘗試使用混合模式創(chuàng)建有趣的色彩效果。
.blend-mode {
background: url(image.jpg);
mix-blend-mode: screen;
}
使用縱橫比屬性簡(jiǎn)化縱橫比盒子的創(chuàng)建。
.aspect-ratio-box {
aspect-ratio: 16/9;
}
使用shape-outside屬性使文本圍繞指定形狀，實(shí)現(xiàn)更動(dòng)態(tài)的布局。
.shape-wrap {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
}
ch單位表示所選字體中字符“0”的寬度，可用于創(chuàng)建一致且響應(yīng)式的布局。
h1 {
font-size: 2ch;
}
使用::marker偽元素為列表項(xiàng)標(biāo)記設(shè)置樣式。
li::marker {
color: blue;
}
使用element()函數(shù)動(dòng)態(tài)引用元素作為背景。
.background {
background: element(#targetElement);
}
使用Flexbox創(chuàng)建粘性底部布局。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
通過(guò)調(diào)整scroll padding來(lái)改善滾動(dòng)行為。
html {
scroll-padding: 20px;
}
使用CSS變量創(chuàng)建交互式高亮效果。
.highlight {
--highlight-color: #e74c3c;
background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
background-size: 100% 200%;
transition: background-position 0.3s;
}
.highlight:hover {
background-position: 0 100%;
}
無(wú)需圖像，樣式化單選框和復(fù)選框。
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #3498db;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 2px solid #e74c3c;
}
使用resize屬性控制textarea的調(diào)整大小行為。
textarea {
resize: vertical;
}
使用background-clip和text-fill-color屬性為文本創(chuàng)建漸變效果。
.gradient-text {
background-image: linear-gradient(45deg, #3498db, #2ecc71);
background-clip: text;
color: transparent;
}
使用word-break屬性控制長(zhǎng)單詞或沒(méi)有空格的字符串的斷行和換行。
.long-words {
word-break: break-all;
}
使用font-variation-settings屬性微調(diào)可變字體樣式。
.custom-font {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 600, 'ital' 1;
}
使用混合模式為元素應(yīng)用疊加效果，創(chuàng)造出有趣的視覺(jué)效果。
.overlay {
mix-blend-mode: overlay;
}
使用:broken偽類為損壞的圖像應(yīng)用樣式。
img:broken {
filter: grayscale(100%);
}
使用CSS形狀為設(shè)計(jì)創(chuàng)建有趣的效果。
.shape {
shape-outside: circle(50%);
}
使用*=操作符的屬性選擇器進(jìn)行子字符串匹配。
[data-attribute*="value"] {
/* 樣式 */
}
使用backdrop-filter為背景應(yīng)用模糊效果，實(shí)現(xiàn)毛玻璃效果。
.element {
backdrop-filter: blur(10px);
}
使用env()函數(shù)在CSS中訪問(wèn)環(huán)境變量。
.element {
margin-top: env(safe-area-inset-top);
}
使用:nth-child選擇器計(jì)算特定屬性值的出現(xiàn)次數(shù)。
[data-category="example"]:nth-child(3) {
/* 第三次出現(xiàn)的樣式 */
}
使用shape-outside結(jié)合polygon()函數(shù)精確地控制文本圍繞不規(guī)則形狀的布局。
.text-wrap {
shape-outside: polygon(0 0, 100% 0, 100% 100%);
}
使用cursor屬性更改鼠標(biāo)樣式。
.custom-cursor {
cursor: pointer;
}
使用HSLA值表示透
明顏色，對(duì)alpha通道進(jìn)行更精細(xì)的控制。
.transparent-bg {
background-color: hsla(120, 100%, 50%, 0.5);
}
使用text-orientation屬性將文本垂直旋轉(zhuǎn)。
.vertical-text {
text-orientation: upright;
}
使用font-variant屬性應(yīng)用小型大寫字母樣式。
.small-caps {
font-variant: small-caps;
}
使用box-decoration-break屬性控制跨多行斷開(kāi)的元素的背景，實(shí)現(xiàn)更靈活的文本環(huán)繞。
.split-background {
box-decoration-break: clone;
}
僅在元素處于焦點(diǎn)且焦點(diǎn)不是由鼠標(biāo)單擊提供時(shí)應(yīng)用樣式。
input:focus-visible {
outline: 2px solid blue;
}
通過(guò)text-rendering屬性改善文本呈現(xiàn)效果。
.optimized-text {
text-rendering: optimizeLegibility;
}
使用initial-letter為塊級(jí)元素的第一個(gè)字母應(yīng)用樣式。
p::first-letter {
font-size: 2em;
}
控制用戶滾動(dòng)超出滾動(dòng)容器邊界時(shí)的行為。
.scroll-container {
overscroll-behavior: contain;
}
使用writing-mode屬性創(chuàng)建縱向布局。
.vertical-layout {
writing-mode: vertical-rl;
}
使用::cue偽元素為HTML5字幕文本應(yīng)用樣式。
::cue {
color: blue;
}
使用line-clamp屬性限制元素中顯示的行數(shù)。
.truncated-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
scroll-snap-align屬性控制滾動(dòng)容器內(nèi)滾動(dòng)捕捉點(diǎn)的對(duì)齊方式，確保對(duì)滾動(dòng)行為進(jìn)行精確控制，提升用戶體驗(yàn)。
.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: center;
}
overscroll-behavior使您可以定義瀏覽器在滾動(dòng)超出范圍時(shí)的處理方式，從而避免不必要的滾動(dòng)效果，提升整體滾動(dòng)體驗(yàn)。
.scrollable {
overscroll-behavior: contain;
}
font-kerning允許對(duì)字符間距進(jìn)行微調(diào)，通過(guò)調(diào)整文本元素中字符之間的間距，確保最佳的可讀性。
p {
font-kerning: auto;
}
與CSS形狀一起使用時(shí)，shape-margin指定浮動(dòng)元素形狀周圍的邊距，可以更精確地控制文本環(huán)繞和布局。
.shape {
shape-margin: 20px;
}
scroll-margin設(shè)置滾動(dòng)容器邊緣與滾動(dòng)內(nèi)容開(kāi)始之間的邊距，提升用戶體驗(yàn)，為滾動(dòng)提供緩沖空間。
.container {
scroll-margin-top: 100px;
}
tab-size屬性控制文本區(qū)域中制表符的寬度，確保在不同用戶代理中一致的顯示。
pre {
tab-size: 4;
}
text-align-last決定塊級(jí)元素中最后一行文本的對(duì)齊方式，為多行塊文本提供對(duì)齊控制。
p {
text-align-last: justify;
}
此屬性控制文本兩端對(duì)齊的行為，指定是使用單詞間還是字符間距進(jìn)行文本對(duì)齊。
p {
text-align: justify;
text-justify: inter-word;
}
column-fill決定如何在多列布局中分配內(nèi)容，允許內(nèi)容依次或平衡分布在列中。
.container {
column-count: 3;
column-fill: auto;
}
outline-offset調(diào)整輪廓與元素邊緣之間的空間，不影響布局，為輪廓的外觀提供更細(xì)致的控制。
button {
outline: 2px solid blue;
outline-offset: 4px;
}
此屬性允許精細(xì)控制數(shù)字字體渲染，啟用特性如數(shù)字大小寫和分?jǐn)?shù)、序數(shù)指示器等。
p {
font-variant-numeric: lining-nums;
}
啟用或禁用字體光學(xué)大小調(diào)整，以調(diào)整字符的間距和比例，實(shí)現(xiàn)在不同字體大小下更好的視覺(jué)和諧。
p {
font-optical-sizing: auto;
}
精確控制文本裝飾（如下劃線、上劃線和刪除線）的粗細(xì)，實(shí)現(xiàn)精細(xì)化定制。
p {
text-decoration-thickness: 2px;
}
text-decoration-skip-ink屬性控制文本裝飾（如下劃線）在被墨水遮擋的情況下是否繼續(xù)繪制，提升可讀性。
a {
text-decoration-skip-ink: auto;
}
word-spacing屬性控制字詞間距，調(diào)整文本的緊湊度和可讀性。
p {
word-spacing: 2px;
}
通過(guò)調(diào)整斷字點(diǎn)和斷字行為，提高文本在窄列中的美觀度和可讀性。
p {
hyphens: auto;
}
background-blend-mode屬性允許背景圖像與其下方的背景顏色進(jìn)行混合，產(chǎn)生出獨(dú)特的視覺(jué)效果。
.element {
background-image: url('image.jpg');
background-color: #3498db;
background-blend-mode: multiply;
}
text-decoration-color屬性控制文本裝飾的顏色，為鏈接和裝飾文本提供更靈活的樣式。
a {
text-decoration: underline;
text-decoration-color: red;
}
overflow-anchor屬性指定了在容器的滾動(dòng)范圍內(nèi)滾動(dòng)時(shí)哪些內(nèi)容應(yīng)保持可見(jiàn)，提升用戶體驗(yàn)。
.container {
overflow-anchor: none;
}
contain-intrinsic-size屬性定義了內(nèi)聯(lián)大小計(jì)算函數(shù)的大小，實(shí)現(xiàn)更精確的布局控制。
img {
contain-intrinsic-size: 200px 300px;
}
line-gap屬性定義了元素的行間距，可以為文字和其他行內(nèi)元素提供更大的空間。
p {
line-gap: 1.5;
}
text-underline-offset屬性控制文本下劃線相對(duì)于基線的垂直偏移量，實(shí)現(xiàn)更加精確的下劃線定位。
a {
text-decoration: underline;
text-underline-offset: 3px;
}
text-decoration-line屬性指定要繪制的裝飾線的類型，可用于單獨(dú)控制上劃線、下劃線、刪除線等。
a {
text-decoration-line: underline overline;
}
text-emphasis屬性為文本設(shè)置強(qiáng)調(diào)標(biāo)志，用于提高關(guān)鍵字的可讀性。
em {
text-emphasis: filled circle;
}
text-orientation屬性控制文本的方向，適用于縱向文本和日文排版等情況。
.vertical-text {
text-orientation: sideways-right;
}
background-origin屬性確定背景圖片的起始位置，影響背景圖片與邊框的相對(duì)位置。
.element {
background-image: url('image.jpg');
background-origin: content-box;
}
counter-set屬性在使用counter-reset創(chuàng)建的計(jì)數(shù)器值基礎(chǔ)上，顯式設(shè)置一個(gè)新的值。
ol {
counter-set: section 1;
}
hanging-punctuation屬性控制標(biāo)點(diǎn)符號(hào)是否在行框之外懸掛，以提高排版的美觀度和可讀性。
p {
hanging-punctuation: last allow-end;
}
line-break屬性控制文本換行行為，確保在指定的斷點(diǎn)處進(jìn)行斷行。
p {
line-break: anywhere;
}
text-justify屬性指定如何分配額外的空間，以便充分利用容器的寬度。
019年3月1日，vivo發(fā)布了旗下全新子品牌iQOO，與以往旗下產(chǎn)品所不同的是，此次發(fā)布的全新旗艦手機(jī)，在產(chǎn)品性能、設(shè)計(jì)、價(jià)格等多個(gè)方面都打破了原有消費(fèi)者對(duì)vivo的印象，以“高性價(jià)”的表現(xiàn)方式呈現(xiàn)在世人面前，而性能也達(dá)到了目前手機(jī)市場(chǎng)的頂尖之列，眾人對(duì)其可謂是期待滿滿。iQOO作為vivo旗下的一款全新子品牌旗艦，“生而強(qiáng)悍”的強(qiáng)勢(shì)宣傳語(yǔ)都彰顯著其強(qiáng)大之處，但是其表現(xiàn)是否真如傳言般強(qiáng)悍呢，除了強(qiáng)悍的性能還有何突出優(yōu)勢(shì)？這是一個(gè)值得我們一起探討的問(wèn)題！
一改傳統(tǒng)機(jī)身外觀 酷炫感十足的變身
iQOO作為一款全新的vivo旗艦品牌，產(chǎn)品包裝在延續(xù)了原有的長(zhǎng)形設(shè)計(jì)，同時(shí)加入了與其相匹配的產(chǎn)品特色，比較有特點(diǎn)的長(zhǎng)條形燈效與不規(guī)則開(kāi)箱口的設(shè)計(jì)，彰顯著其與眾不同的特點(diǎn)。
iQOO外觀設(shè)計(jì)借鑒了超跑的“Speed Art”的設(shè)計(jì)語(yǔ)言，將暗夜光軌紋理與3D炫彩玻璃后蓋之中，每一根光軌線條采用精湛的技術(shù)，通過(guò)國(guó)外精密的鉆石刀在銅柱上雕刻出10um的紋理，然后經(jīng)過(guò)復(fù)雜的工藝在光學(xué)菲林上轉(zhuǎn)印紋路，再通過(guò)光學(xué)鍍膜機(jī)把700納米厚的二氧化硅等材料蒸發(fā)到菲林上，從不同的角度有著不同的工藝之美，透露著其特有的速度與力量的效果，呈現(xiàn)出低調(diào)中的個(gè)性，觀賞感與辨識(shí)度極強(qiáng)。
科技視訊入手的這款是12GB+256GB“猛獸版”騎士黑版本，在機(jī)身表面還加入了碳纖維紋理，握持時(shí)會(huì)感受到不錯(cuò)的阻尼感，觸摸時(shí)既有金屬的質(zhì)感，又有玻璃的細(xì)膩，上手非常舒適。
另外機(jī)身背面的中間還增加了一個(gè)隱藏式1680萬(wàn)色的LED燈帶，并且上方印著斜體的“MONSTER INSIDE”字符標(biāo)識(shí)，與背部的紋理融為一體，呈現(xiàn)出更加酷炫與速度疾馳的感覺(jué)，而且LED燈效的加入也帶來(lái)了非常炫酷的燈光體驗(yàn)，此LED燈在來(lái)電、通話、通知、充電、音樂(lè)、Jovi等場(chǎng)景都可迸發(fā)出不一樣的閃亮燈效，激發(fā)一顆電競(jìng)之心。
iQOO的后置三攝與“iQOO”的品牌字樣標(biāo)識(shí)分別排列在背面的左側(cè)上下位置，處于同一豎列線條，保持了機(jī)身的協(xié)調(diào)之美。另外iQOO還增加了NFC功能，將其識(shí)別區(qū)域設(shè)置在背面的上半部分，有效提升日常“刷手機(jī)”時(shí)的NFC識(shí)別準(zhǔn)確率，在日常生活中可以提供更為靈敏、便利的NFC識(shí)別體驗(yàn)。
機(jī)身左右邊框還增加了超跑腰線設(shè)計(jì)，通過(guò)將側(cè)邊框挖出兩條橫槽，類似于跑道的設(shè)計(jì)，使得機(jī)身從側(cè)邊觀感更為纖薄，常見(jiàn)的電源鍵、音量鍵等按鍵也集成在邊框的跑道之中，同時(shí)按鍵上方也增加了車輪紋理，按壓感極為舒適。
另外騎士黑版本的iQOO機(jī)身電源鍵采用了鮮艷的亮橘色設(shè)計(jì)，與機(jī)身整體的黑色呈現(xiàn)出強(qiáng)烈的對(duì)比，點(diǎn)睛之筆的設(shè)計(jì)，讓手機(jī)顯得更為高端一些。
最令人驚喜的是，iQOO在機(jī)身右側(cè)中框兩端配備了電競(jìng)手機(jī)才配備的隱藏游戲壓感按鍵，可實(shí)現(xiàn)類如手柄的RB、LB鍵的操作功能，在“吃雞”類游戲中能夠?qū)崿F(xiàn)“四指操作”，宛如自帶“物理外掛”的存在。
iQOO并沒(méi)有增加紅外傳感器設(shè)計(jì)，無(wú)法滿足手機(jī)變身遙控器的需求，雖然日常此功能使用頻率并不高，但是依舊感覺(jué)有些許遺憾，機(jī)身的頂端僅有常見(jiàn)的3.5mm耳機(jī)孔與降噪麥克風(fēng)孔。
機(jī)身的底端則是常見(jiàn)的揚(yáng)聲器、麥克風(fēng)以及Type-C插口，無(wú)論正反都可以很好與電源適配器相匹配，設(shè)計(jì)的風(fēng)格較為簡(jiǎn)潔，保持了其根本穩(wěn)中帶酷的基調(diào)。
6.41英寸水滴FHD+顯示屏 第六代屏幕指紋解鎖加持
iQOO的手機(jī)正面搭載了一塊6.41英寸水滴屏，正面造型設(shè)計(jì)較為簡(jiǎn)潔，并盡可能減少機(jī)身正面元器件對(duì)屏幕的占有，采用19.5:9屏幕比例設(shè)計(jì)，機(jī)身觀感極為修長(zhǎng)，除了帶來(lái)高達(dá)91.7%的屏占比，同時(shí)也呈現(xiàn)出更為寬廣的畫面效果。
屏幕采用了AMOLED的升級(jí)版的Super AMOLED材質(zhì)，AMOLED屏幕分為三層：顯示屏幕、觸摸感應(yīng)面板和最外面的那層玻璃，Super AMOELD則是取消了中間的觸摸感應(yīng)面板，將AMOLED感應(yīng)層做在了屏幕之上，以此帶來(lái)的好處就是操控更靈敏，再加上三星自研的mDNIe引擎，使得Super AMOLED屏幕看起來(lái)非常絢麗，另外屏幕分辨率為2340x1080，屏幕對(duì)比度60000:1，并且可支持?jǐn)?shù)碼電影院的100%DCI-P3，可提供更為鮮艷、亮麗、色彩豐富的畫面效果，屏幕觀感通透且舒適。
為了帶來(lái)更大的屏占比，iQOO將前置雙核1200萬(wàn)像素的攝像頭集成在“水滴”之中，并同時(shí)將聽(tīng)筒與上邊框相結(jié)合，形成隱藏式聽(tīng)筒，進(jìn)一步減少器件對(duì)屏幕的占有，提高屏幕可視視野。
除了機(jī)身額頭的優(yōu)化之外，iQOO機(jī)身邊框下巴同樣進(jìn)行了縮減，采用COF封裝工藝將下邊框縮減至極窄范圍內(nèi)，在保證不會(huì)產(chǎn)生誤觸的同時(shí)，帶來(lái)更窄的邊框設(shè)計(jì)，讓屏幕視覺(jué)觀感更為震撼。
另外iQOO依托vivo近幾年不斷進(jìn)步的科研力量，搭載了時(shí)下前沿的屏幕指紋解鎖技術(shù)，在超光感屏幕下方加入了屏幕指紋識(shí)別模塊。此次iQOO全新搭載的屏幕指紋解鎖技術(shù)不僅融合了vivo前五代技術(shù)，還加入了超過(guò)千萬(wàn)臺(tái)的屏幕指紋解鎖數(shù)據(jù)，同時(shí)結(jié)合了高通驍龍855的新一代DSP硬件加速算法，實(shí)際解鎖體驗(yàn)得到了進(jìn)一步提升，360°指紋解鎖無(wú)壓力。
在使用指紋識(shí)別功能時(shí)，大家僅需進(jìn)入手機(jī)設(shè)置中錄入指紋，通過(guò)不斷重復(fù)移動(dòng)、放置手指位置，從而提高手指的識(shí)別區(qū)域，進(jìn)而體驗(yàn)更靈敏的指紋解鎖方式。
除了可通過(guò)屏下指紋進(jìn)行解鎖之外，iQOO還可通過(guò)人臉識(shí)別，可在雙手不便時(shí)帶來(lái)更便利的解鎖體驗(yàn)，人臉解鎖的靈敏度并沒(méi)有因?yàn)槭艿角爸脭z像頭區(qū)域的縮小而改變，實(shí)際解鎖與往常無(wú)異。人臉信息錄入的方法與其它手機(jī)相同，只需進(jìn)入解鎖界面，選擇錄入面部信息并隨后開(kāi)啟面部解鎖功能即可。
殘暴的高通驍龍855芯片 眾多物理外掛加持
生而強(qiáng)悍的iQOO在性能上不可謂是非常強(qiáng)悍，作為此品牌的第一款機(jī)型，處理器采用新一代7nm制程工藝的高通驍龍855處理器，CPU搭載定制設(shè)計(jì)Kryo485架構(gòu)內(nèi)核，最高主頻可達(dá)2.84Ghz，CPU單核性能提升45%。GPU采用全新的Adreno640，圖形渲染速度提升20%，性能再戰(zhàn)巔峰之巔。
同時(shí)iQOO還配備了12GB+256GB大內(nèi)存，其中運(yùn)行內(nèi)存采用的是LPDDR4X規(guī)格，可保證長(zhǎng)時(shí)間提供流暢用機(jī)體驗(yàn)，配以驍龍855處理器等強(qiáng)悍的硬件性能支撐，足以可用“完虐”二字來(lái)應(yīng)對(duì)日常的游戲、觀影以及多任務(wù)運(yùn)行等多個(gè)方面體驗(yàn)。
在安兔兔性能跑分中獲得369130分，其中CPU120302分，GPU156018分，在性能排行榜中排名第二，位于同樣搭載驍龍855芯片的小米9與聯(lián)想Z5 Pro GT版之間。
在geekbench4跑分評(píng)測(cè)中單核3471分，多核11062分，在RenderScript性能評(píng)測(cè)中獲得7223分，與搭載驍龍855芯片的其它手機(jī)大致相同。
在魯大師性能評(píng)測(cè)中故意的360581分，整體性能超越99%的對(duì)手，其中CPU為118681分，GPU為1544375分，在性能排行中位于第一位。在體驗(yàn)評(píng)測(cè)中獲得139.58分，在反應(yīng)瀏覽器性能的HTML5評(píng)測(cè)中獲得45856分。
在魯大師AI性能評(píng)測(cè)中獲得48590分，在所有的機(jī)型中排名第1，超越99%的其它手機(jī)，高通驍龍855芯片的AI性能此次也得以提升，是上一代的3倍之多，可為日常的AI智能體驗(yàn)提供強(qiáng)勁的硬件基礎(chǔ)。
除了強(qiáng)大的硬件支撐之外，iQOO系統(tǒng)還添加了全新的vivo Multi-Turbo軟件方面的優(yōu)化，除了可支持原有的Game Turbo游戲?qū)偌铀僦猓舜芜€新增了Net Turbo網(wǎng)絡(luò)加速，在游戲延時(shí)大或者Wi-Fi質(zhì)量差時(shí)，會(huì)自動(dòng)將網(wǎng)絡(luò)切換到4G網(wǎng)絡(luò)，以保證游戲的最佳網(wǎng)速供應(yīng)。另外游戲體驗(yàn)時(shí)，Center Turbo處理器加速會(huì)優(yōu)化后臺(tái)運(yùn)行程序資源，從而保證游戲的CPU與內(nèi)存資源都保持在最大情況下，從而體驗(yàn)更為暢快的游戲體驗(yàn)。
另外iQOO系統(tǒng)還增加了游戲魔盒，可通過(guò)屏蔽游戲干擾、降低功耗、提升游戲性能等多個(gè)方面，營(yíng)造出更適合游戲體驗(yàn)的環(huán)境。另外在游戲空間也可觀察手機(jī)CPU、溫度、網(wǎng)絡(luò)負(fù)載等各種情況，做到心有所屬。
機(jī)身的溫度一直是影響游戲體驗(yàn)的重要因素之一，過(guò)熱很容易引發(fā)處理器性能下降，從而導(dǎo)致游戲體驗(yàn)卡頓、不流暢等現(xiàn)象的發(fā)生。針對(duì)此類問(wèn)題，iQOO加入了“超級(jí)液冷散熱”技術(shù)，將機(jī)身背面內(nèi)部增加了由萬(wàn)級(jí)導(dǎo)熱系數(shù)熱管、可固化導(dǎo)熱凝膠、高導(dǎo)熱鋁合金框架、多層復(fù)合石墨熱膜共同組成的多層散熱結(jié)構(gòu)，通過(guò)高溫蒸發(fā)吸熱、低溫液化放熱的原理達(dá)到快速降溫效果，在長(zhǎng)時(shí)間游戲、邊充邊玩等容易發(fā)熱場(chǎng)景下，可有效控制機(jī)身溫度情況，保證手機(jī)性能屬于最佳狀態(tài)。
在《王者榮耀》游戲體驗(yàn)時(shí)，得益于高通驍龍855帶來(lái)的驍龍Elite Gaming、Vulkan1.1圖形庫(kù)以及Super AMOLED超感顯示屏的加持，在游戲體驗(yàn)時(shí)畫面以及角色的質(zhì)感更為細(xì)膩、豐富，19.5:9的視野更為寬廣，游戲可以達(dá)到高響應(yīng)率與更精確、速度的操作體驗(yàn)。
另外當(dāng)達(dá)到三殺、五殺等激情時(shí)刻時(shí)，背面的Monster Halo燈效會(huì)迸發(fā)光芒，營(yíng)造更激情的游戲快感。
在開(kāi)啟高幀率游戲模式下，游戲的FPS保持在59的極高水準(zhǔn)，而且?guī)实牟▌?dòng)幅度非常之小，僅有1.30幀，并且FPS幀數(shù)維持在穩(wěn)定的規(guī)律狀態(tài)，整體的體驗(yàn)極為順暢，把玩之后機(jī)身的溫度并沒(méi)有發(fā)生明顯變化，機(jī)身溫度一直保持在正常狀態(tài)。
在吃雞類游戲中，橫屏體驗(yàn)絕地求生之《刺激戰(zhàn)場(chǎng)》游戲時(shí)，iQOO右側(cè)邊配備的Monster Touch壓感按鍵可實(shí)現(xiàn)“射擊”、“開(kāi)槍”等操作，邊走邊壓槍的高強(qiáng)度“四指操作”也可輕松實(shí)現(xiàn)。
游戲界面時(shí)可先從屏幕左側(cè)劃出游戲電競(jìng)快捷操作界面，選擇新增的壓感按鍵功能，通過(guò)調(diào)整“A”“B”按鍵的位置以及壓感靈敏度，即可感受物理“外掛”般的“吃雞”游戲體驗(yàn)。
另外iQOO機(jī)身還配備了專業(yè)線性馬達(dá)，可將游戲槍聲轉(zhuǎn)換為震動(dòng)效果，無(wú)論是視覺(jué)、聽(tīng)覺(jué)還是觸覺(jué)都沉浸式感受，游戲體驗(yàn)更逼真。
《刺激戰(zhàn)場(chǎng)》的游戲畫面品質(zhì)與幀數(shù)設(shè)置可達(dá)到最高的HDR高清、超高標(biāo)準(zhǔn)，體驗(yàn)更逼真的游戲環(huán)境。
整體的游戲FPS保持在39數(shù)值（最高40），平均波動(dòng)在0.97幀，游戲的體驗(yàn)較為順暢，無(wú)論是開(kāi)車、跑毒、拾取都極為順暢。尤其在壓槍過(guò)程中，得益于Monster Touch壓感按鍵的存在，壓槍極為穩(wěn)定，可以快速擊殺敵人，輕松吃雞。
4000mAh大電池+44W超級(jí)閃充 續(xù)航能力強(qiáng)悍無(wú)敵
除了強(qiáng)悍的性能之外，手機(jī)續(xù)航能力也是大家最關(guān)心的問(wèn)題，智能手機(jī)的續(xù)航能力一直是短板。iQOO在設(shè)計(jì)時(shí)充分考慮續(xù)航問(wèn)題，搭載一個(gè)4000mAh的大容量電池，即便搭載6.41英寸大顯示屏，可獲得平均13.5小時(shí)的長(zhǎng)時(shí)間續(xù)航體驗(yàn)，滿足一天正常使用需求完全沒(méi)問(wèn)題。
在充電方面，iQOO做了重大的創(chuàng)新與進(jìn)化，iQOO充電方式采用vivo Super FlashCharge電荷泵充電技術(shù)，同時(shí)還引入了Flash Fast Charge充電算法優(yōu)化技術(shù)，可支持44W超快閃充技術(shù)，在提升速度的同時(shí)降低了充電時(shí)的發(fā)熱，特別采用了3C電芯，峰值充電電流高達(dá)近8A，息屏狀態(tài)內(nèi)可以在5分鐘內(nèi)實(shí)現(xiàn)最高680mAh的電池增長(zhǎng)，在iQOO的4000mAh大電池下，極速充至17%，肉眼可見(jiàn)的充電速度，只需45分鐘即可將電量充滿至100%。
iQOO在數(shù)據(jù)線設(shè)計(jì)方面也同樣煞費(fèi)苦心，充電線采用創(chuàng)新L型+膠囊設(shè)計(jì)，設(shè)計(jì)風(fēng)格更為圓潤(rùn)光滑，另外創(chuàng)新的L型設(shè)計(jì)在橫屏握持手機(jī)時(shí)，不會(huì)造成以往的不順手現(xiàn)象，再搭配其44W超級(jí)閃充，邊充邊玩更暢快。
后置超廣角AI三攝 延續(xù)vivo美顏拍攝基因
iQOO后置搭載了索尼旗艦級(jí)的雙核1200萬(wàn)IMX363主攝、1300萬(wàn)像素超廣角鏡頭與一個(gè)200萬(wàn)像素的景深攝像頭，并且擁有120°超大視野的拍照能力，對(duì)焦速度極快。同時(shí)搭載的AI智能場(chǎng)景識(shí)別功能，可根據(jù)不同拍攝的景物自動(dòng)識(shí)別拍照模式，通過(guò)系統(tǒng)自我優(yōu)化，利用AI Turbo 具備的長(zhǎng)期學(xué)習(xí)能力，AI場(chǎng)景識(shí)別不僅能對(duì)夜景、運(yùn)動(dòng)、抖動(dòng)和逆光這些場(chǎng)景識(shí)別并分別調(diào)整，更能夠識(shí)別照片中的內(nèi)容，人像、美食、鮮花等，并且有針對(duì)性的進(jìn)行智能調(diào)整，從而拍攝出更符合當(dāng)前場(chǎng)景的意境照片。
實(shí)際拍攝樣張如下：
另外iQOO的超廣角拍攝可在有限拍攝位置，拍攝出更為寬廣的畫面效果，更能凸顯拍攝景物的全景面貌以及震撼的拍攝效果，畫面兩側(cè)的畸變形狀也可以得到很好的控制。
▲正常拍攝模式
▲廣角拍攝模式
在拍攝暗光環(huán)境景物時(shí)，iQOO具備高達(dá) 12.3EV的動(dòng)態(tài)范圍，傳感器單個(gè)像素面積更提升至1.4μm，搭配f/1.79超大光圈，都為夜景、暗光等拍攝環(huán)境下的穩(wěn)定清晰成像提供強(qiáng)大的硬件支持。配合其連續(xù)拍攝12-16幀的多幀降噪合成高品質(zhì)技術(shù)，在逆光、弱光情況下可拍攝出明亮通透的照片效果，極大還原了照片細(xì)節(jié)，保證暗部曝光正確的同時(shí)，明部的細(xì)節(jié)也得到保留，實(shí)際表現(xiàn)較為不錯(cuò)。
在人像美顏拍攝方面，一直是vivo強(qiáng)項(xiàng)！此次iQOO在拍照功能上還配置了AI美顏，這一功能可以輕松調(diào)整面部容貌，包括削臉、瘦臉、瘦鼻、長(zhǎng)鼻、大眼、眼距、嘴型、下巴、額頭等，讓愛(ài)美人士解鎖更多拍攝模式，照片效果更理想。
iQOO前置搭載的雙核1200萬(wàn)像素?cái)z像頭，同樣具備了強(qiáng)大的拍攝能力，在人像拍攝以及效果處理方面，都有著獨(dú)到之處，拍攝出的自拍效果極易捕獲愛(ài)美人士的芳心，算是保留了vivo的美顏招牌。
全新Funtouch OS9 熟悉的簡(jiǎn)潔操作系統(tǒng)
iQOO搭載的是全新基于Android9開(kāi)發(fā)的Funtouch OS9操作系統(tǒng)，相比上一代Funtouch OS系統(tǒng)有了很大的改變，最直接的感受系統(tǒng)界面變的更為簡(jiǎn)潔，界面的滑動(dòng)及操作變得更為暢快，而且具備一種科技感和速度感。再配以高通驍龍855旗艦芯片的強(qiáng)大性能，為日常流暢系統(tǒng)體驗(yàn)提供了強(qiáng)勁的性能支撐。
在系統(tǒng)導(dǎo)航方面，iQOO可支持適配全面屏操作的導(dǎo)航手勢(shì)，減少導(dǎo)航鍵對(duì)屏幕的占有，從界面底部三個(gè)區(qū)域向上滑動(dòng)，可分別調(diào)出控制中心、返回待機(jī)、返回上一級(jí)界面，整體的操作體驗(yàn)較為順暢，而且導(dǎo)航手勢(shì)的設(shè)計(jì)也較為人性化，可極為快速的熟練上手操作。
另外在智能體驗(yàn)方面iQOO同樣帶來(lái)了不少細(xì)節(jié)的貼心設(shè)計(jì)，比如隔空解鎖與智能提醒功能。進(jìn)入手機(jī)智能體感設(shè)置界面，開(kāi)啟隔空解鎖功能，即可無(wú)鎖屏密碼且點(diǎn)亮屏幕時(shí)，手掌從手機(jī)頂部上方（3cm-5cm）處拂過(guò)即可解鎖，有種特殊的魔術(shù)感。另外開(kāi)啟智能提醒功能之后，拿起手機(jī)即可獲得未接來(lái)電和未讀信息的提醒，更為貼心。
最貼心的還是要屬Jovi語(yǔ)音助手功能，iQOO搭載從硬件到軟件全面升級(jí)的Jovi語(yǔ)音助手，可智能的識(shí)別語(yǔ)音指令，達(dá)到快速的命令執(zhí)行。除此之外，最歡喜的還是其“我的教學(xué)命令”功能，可通過(guò)教會(huì)Jovi非出廠應(yīng)用或命令的新操作，做到真正懂你所需的智能語(yǔ)音體驗(yàn)。
iQOO全系配備了NFC-eSE芯片功能，可滿足NFC刷公交等便利的手機(jī)支付體驗(yàn)，在使用時(shí)可通過(guò)vivo 錢包開(kāi)通vivo公交服務(wù)，然后在使用時(shí)只需把手機(jī)貼近公交刷卡機(jī)或者地鐵閘機(jī)，即可享受手機(jī)刷卡乘車的便捷體驗(yàn)。
總的來(lái)說(shuō)，iQOO作為第一款全新vivo子品牌旗艦機(jī)，搭載的硬核855高通驍龍旗艦芯、LPDDR4X內(nèi)存規(guī)格、超級(jí)液冷技術(shù)、第六代屏幕指紋技術(shù)、Monster Touch壓感按鍵、4000mAh大電池以及44W超級(jí)閃充等眾多黑科技加持，可謂是亮點(diǎn)多多，而后置廣角三攝、前置雙核1200萬(wàn)像素，NFC功能的加入又為其增分不少，最重要僅2998元的售價(jià)無(wú)疑讓它在手機(jī)市場(chǎng)變得更有競(jìng)爭(zhēng)力。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
