整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是前端西瓜哥，我們今天來看看圖形的一些常見屬性。
{
x: 10,
y: 10,
width: 50,
height: 50
}x 和 y 代表的是圖形的 位置，對于矩形來說，是左上角。對于圓形、圓環這些來說，則是在圓心處。
這個位置也是圖形進行變形的參考點，或者說是旋轉時的中心。
offsetX 和 offsetY 可以改變圖形的位置。offset 其實是將畫布坐標系的原點移動一定距離，再繪制圖形。
比如對矩形，我們將 offsetX 和 offsetY 設置為 width/2 和 height/2，我們就能讓矩形的位置跑到矩形的中點。
width 和 height 為圖形的寬高。但對于圓形類圖形，則是通過半徑 radius 來設置大小。
用法：fill: #f04
修改圖形顏色：
rect.fill('green');fill 方法不僅可以設置顏色，還可以獲取顏色，只要不傳入參數即可：
const fill = rect.fill();當然我們還可以使用高級的填充圖片、漸變色的功能，需要用到 fillPatternImage 、fillLinearGradientStartPoint 、fillLinearGradientEndPoint 、fillLinearGradientColorStops 等方法，內容有點多，這里就不展開講了。
描邊相關的樣式很多，這里只介紹最常用的 stroke 和 strokeWidth。
用法：stroke: '#000' strokeWidth: 4
修改圖形的描邊顏色、線寬：
rect.stroke('blue').strokeWidth(8);konva 支持鏈式寫法。
鏈式寫法，其實就是一個對象，執行了方法后，又返回了這個對象。
這樣的話我們就可以將多個方法的調用鏈接起來，提高代碼可讀性，常見于修改對象屬性值。
獲取描邊顏色、線寬
const stroke = rect.stroke();
const strokeWidth = rect.strokeWidth();用法：opcity: 0.5
設置透明度：
rect.opcity(0.3)獲取不透明度的值：
const opcity=rect.opcity();用法：visible: true
顯示圖形：
rect.show();
// 或者
rect.visible(true);隱藏圖形：
rect.hide();
// 或
rect.visible(false);本質其實就是修改圖形的 visible 屬性，然后重新渲染。show 和 hide 只是語義化的封裝。
我們不能像操作 DOM 元素一樣，直接給圖形元素設置 cursor 屬性。
但我們可以在光標移動到圖形上的時候，動態改變 canvas 掛載的 DOM 元素的 cursor 屬性。
rect.addEventListener('mouseenter', () => {
stage.container().style.cursor = 'move'
})
rect.addEventListener('mouseleave', () => {
stage.container().style.cursor = ''
})不同形狀有各自的屬性，具體可以看 konva 的文檔：
https://konvajs.org/api/Konva.html
個成功的Web App必須有良好的用戶體驗。當我們談及改善用戶體驗時，你會想到什么？
其實，有一點是很容易被開發者忽視的，那就是CSS。我們可以使用一些CSS技巧來改善網頁的表現形式、交互細節和可訪問性。
而且這些技巧不需要花費太多時間，也不需要消耗服務器資源。你只需要花兩個小時學習，然后就可以把它應用到你所有的項目中，并永遠改善用戶體驗。
有時你的按鈕很小，這可能導致用戶無法準確點擊按鈕。這種現象經常發生在移動端上。如果用戶點擊次數太多，沒有點擊他們想要的按鈕，或者點擊錯誤的按鈕，會讓他們感到非常沮喪。
那么，如何解決這個問題呢？有些開發者可能會說：把按鈕做大點。
但網頁中元素的大小往往是固定的，我們不能輕易調整一個元素的大小。而且如果按鈕太大，感覺很奇怪。
一個更好的解決方案是在不改變按鈕原始尺寸的情況下增加其可點擊區域。具體來說：我們可以使用偽元素來增加一個元素的可點擊區域。
例如，這里有一個按鈕。
<button id="btn">btn</button>
然后我們可以為它添加一個偽類。
#btn::before {
content: "";
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
這時，如果我們點擊按鈕周圍的區域，我們仍然可以觸發按鈕的點擊事件。
事例地址：
https://codepen.io/bytefishmedium/pen/rNYNoRX
當頁面被#鏈接滾動時，默認效果是這樣的。
這種突然的跳躍會讓人感到不舒服。為了解決這個問題，我們可以使用這個CSS樣式：sroll-behavior: smooth。
事例地址：https://codepen.io/bytefishmedium/pen/NWwWoKL
我們的網頁經常需要提供一些內容供用戶選擇，如電話號碼、地址、標題等。而這些文字應該是一個整體，我們希望當用戶點擊部分文字時，剩余的文字會被自動選擇。
要實現這種效果非常簡單，只需使用這個CSS樣式：user-select: all 。用戶選擇的CSS屬性控制用戶是否可以選擇文本。如果它的值是 all，意味著一個元素的所有內容都將被原子化地選擇。
事例地址：https://codepen.io/bytefishmedium/pen/xxPxMZO
如果你想在文本被選中后添加一些額外的樣式，你可以使用::selection 。::selection CSS偽元素將樣式應用于文檔中被用戶突出顯示的部分（比如在文本上點擊和拖動鼠標）。
但要記住。只有某些CSS屬性可以和::selection一起使用。
事例地址：https://codepen.io/bytefishmedium/pen/gOXOqMz
在不同的場景下使用不同的鼠標樣式可以幫助讀者感知頁面的當前狀態，從而改善用戶的互動體驗。
cursor CSS屬性設置鼠標指針在一個元素上時要顯示的鼠標指針（如果有的話）。
光標設置應該告知用戶在當前位置可以進行的鼠標操作，包括文本選擇、激活幫助或上下文菜單、復制內容、調整表格大小，等等。你可以用一個關鍵詞來指定光標的類型，或者加載一個特定的圖標來使用（有可選的回退圖像和強制性的關鍵詞作為最后的回退）。
例如：
事例地址：https://codepen.io/bytefishmedium/pen/bGYGzRz
有很多光標樣式，你可以在MDN文檔中找到它們。
現在我們來看看 text-overflow 的問題。如果一個文本容器的內容是從服務器返回的，或者是由用戶輸入的，那么就很難預測這個文本會有多長。
如果沒有任何預防措施，你可能會寫出這樣的代碼。
<head>
<style>
.container{
border: 2px solid red;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="username">bytefish</div>
<p class="profile">FE, UX Designer</p>
</div>
</body>
這個容器有一個固定的寬度和高度，包裹著名字和介紹。
但如果有些用戶的簡介太長，就會導致文本溢出容器，使頁面看起來很糟糕。
在這一點上，我們可以將溢出的文本折疊起來。做到這一點就像添加三行CSS樣式一樣簡單。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 可以使文本不被包起來。然后我們使用overflow: hidden來隱藏溢出的文本。最后，我們使用 text-overflow: ellipsis 在文本的末尾添加一個圓點，向用戶表明有一些隱藏的文本。
事例地址：https://codepen.io/bytefishmedium/pen/VwrwgdQ
現在我們來討論一下圖片的風格。網絡應用中使用的圖片一般由后端提供。你可能已經與后端開發者達成協議，將圖片保持在一個固定的尺寸。然后你寫下這樣的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img-list {
display: flex;
flex-direction: row;
list-style: none;
}
</style>
</head>
<body>
<ul class="img-list">
<li>
<img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
</li>
<li>
<img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
</li>
<li>
<img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
</li>
</ul>
</body>
</html>
而網頁看起來是這樣的。
圖片的排列與我們所期望的一樣。
通常情況下是沒有問題的。但是當我們寫代碼時，我們不能假設一切都會按照我們的預期發展。我們需要做好充分的準備。如果后端返回的圖片不正常，不符合預期的尺寸，可能大也可能小，那么布局就會被打亂。
你可以用這個替換其中一張圖片的鏈接。
https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg
你會發現，頁面突然變得雜亂無章。
為了防止這個問題，使我們的頁面更加健壯，我們可以設置圖片的寬度和高度。這樣，我們就不必擔心后端返回的圖片的大小。
img {
width: 128px;
height: 128px;
}
但上述寫法有一個缺點：如果圖像本身的長寬比與我們設定的長寬比不一致，圖像將被壓縮或拉伸。
為了保持圖像的原始長寬比，我們可以使用 object-fit: cover 。
img {
width: 128px;
height: 128px;
object-fit: cover;
}
object-fit 的CSS屬性設置一個被替換的元素的內容，如<img>或<video>，應該如何調整大小以適合其容器。
如果該值是 cover，那么被替換的內容的大小將保持其長寬比，同時填充元素的整個內容框。如果對象的長寬比與它的盒子的長寬比不一致，那么該對象將被剪掉以適配。
我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是，在實際應用中，可能由于后端服務的不穩定，或者用戶自身的網絡信號不好，我們的網頁可能無法正確加載圖片。
當圖片缺失時，瀏覽器的默認樣式是不優雅的，這里我們可以優化它。
我們可以給 img元素添加一個 onerror 事件。如果在加載圖片時出現了錯誤，那么我們可以通過 onerror事件給該元素添加一個樣式，并使用404圖片。
img 元素:
<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">
假設這就是我們的404圖像:
https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg
下面是 css 代碼
img.error {
display: inline-block;
transform: scale(1);
content: '';
color: transparent;
}
img.error::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
}
這樣，當 img 元素中的圖片鏈接無法加載圖片時，我們的404圖片將被使用。
這里還有一點需要優化。在這種情況下，如果原始圖片沒有被正確加載，用戶就不知道這個圖片應該是什么。為了方便用戶理解，我們可以將 img 元素的 alt 屬性顯示在頁面上。
img.error::after {
content: attr(alt);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 2;
background-color: rgba(0, 0, 0, .5);
color: white;
font-size: 12px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
假設img的 alt 屬性是這樣的。
<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >
事例地址：https://codepen.io/bytefishmedium/pen/vYWYMxG
當你在設計顏色組合時，你是否考慮過頁面的顏色對比？
你需要知道，世界上有很多色盲和色弱用戶。如果你的頁面的對比度低，可能會導致他們無法正常使用你的產品。無論是出于人文關懷，還是出于留住客戶的考慮，你都應該設計出合適的對比度。
WCAG AA規范指出，所有重要的內容需要有4.5:1以上的色彩對比度。
這里有一個對比度檢查器的工具。
https://webaim.org/resources/contrastchecker/
事例：
我們也可以使用Chrome DevTool來檢查一個元素的顏色對比。然后我們可以發現，Medium的網頁也在實踐這一原則。
俗話說得好，細節決定成敗。如果你的項目有很多可以改善用戶體驗的細節，你就可以讓用戶感到舒服，你就有更高的成功概率。
~完，我是刷碗智，新的一年我們一起刷刷刷！
作者：Shadeed 譯者：前端小智 來源：medium 原文：https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b
果我們想在 HTML 元素中設置 CSS 樣式，則需要通過 CSS 選擇器進行控制。換句話說，CSS 選擇器就是用于指向需要添加 CSS 樣式的標簽，讓 CSS 樣式知道自己需要作用到那個標簽上去。
CSS 的繼承性是指被包在內部的標簽將擁有外部標簽的樣式性，即子元素可以繼承父元素的屬性。
以下分別介紹了幾種常用的選擇器與其可繼承的屬性。
我們通過設置標簽的 id 屬性來設置id選擇器。CSS 中 id 選擇器以 # 來定義。如以下則是設置 id 為“box”的 CSS 樣式。為 div 添加一個高度為 100px，寬度為 100px，背景顏色為紅色的樣式。
常用的選擇器還有類選擇器。類選擇器通過設置標簽的 class 屬性去設置樣式。CSS 中 class 選擇器以 . 來定義。如以下則是設置class 為“box”的 CSS 樣式。為div添加一個高度為 100px，寬度為 100px，背景顏色為藍色的樣式。
標簽選擇器是為某一類標簽設置 CSS 樣式。在 CSS 中直接以標簽名設置樣式。如以下是設置 div 的 CSS 樣式。給 div 加上一個高度為 100px,寬度為 100px,背景顏色為粉色的樣式。
我們也可以直接在標簽內寫 CSS 代碼。通過加上 style 屬性，就可以在 style 內添加 CSS 樣式了。
CSS 中可繼承的屬性有以下幾種。
font | 組合字體 |
font-family | 規定元素的字體系列 |
font-weight | 設置字體的粗細 |
font-size | 設置字體的尺寸 |
font-style | 定義字體的風格 |
font-variant | 設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。 |
font-stretch | 允許你使文字變寬或變窄。所有主流瀏覽器都不支持。 |
font-size-adjust | 為某個元素規定一個 aspect 值，字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個字體的 aspect 值。這樣就可以保持首選字體的 x-height。 |
text-indent | 文本縮進 |
text-align | 文本水平對齊 |
line-height | 行高 |
word-spacing | 增加或減少單詞間的空白（即字間隔） |
letter-spacing | 增加或減少字符間的空白（字符間距） |
text-transform | 控制文本大小寫 |
direction | 規定文本的書寫方向 |
color | 文本顏色 |
visibility | 規定元素是否可見 |
caption-side | 規定表格標題的放置方式 |
border-collapse | 為表格設置合并邊框模型 |
border-spacing | 設置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式） |
empty-cells | 設置是否顯示表格中的空單元格（僅用于“分離邊框”模式） |
table-layout | 顯示表格單元格、行、列的算法規則 |
list-style-type | 設置列表項標記的類型 |
list-style-image | 使用圖像來替換列表項的標記 |
list-style-position | 設置在何處放置列表項標記 |
list-style | 在一個聲明中設置所有的列表屬性 |
quotes | 設置嵌套引用（embedded quotation）的引號類型 |
cursor | 規定要顯示的光標的類型（形狀） |
page | 檢索或指定顯示對象容器時使用的頁面類型 |
page-break-inside | 設置元素內部的 page-breaking 行為 |
orphans | 設置或返回一個元素必須在頁面底部的可見行的最小數量（用于打印或打印預覽） |
speak | 規定內容是否將以聲音形式呈現 |
speak-punctuation | 規定如何念出標點符號 |
speak-numeral | 規定如何念出數字 |
speak-header | 指定如何處理表格標題。應該在每個單元格之前朗讀標題，還是僅在標題與前一個單元格不同的單元格之前念出標題。 |
speech-rate | 規定說話的速度 |
volume | 規定說話的音量 |
voice-family | 規定語音的語音家族 |
pitch | 規定說話的聲音 |
pitch-range | 規定語音的變化（單調還是動聽的聲音？） |
stress | 規定語音中的“壓力” |
richness | 指定語音的豐富程度。（聲音豐富還是稀薄？） |
azimuth | 設置聲音的來源 |
elevation | 設置聲音的來源 |
以上就是編程獅(w3cschool.cn)小編為你整理的 CSS 選擇器及其繼承屬性的總結。希望可以幫到你~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
