Nay mình tiếp tục chia sẻ cho các bạn thêm 1 tip nữa, đó là cách chọn thằng con duy nhất, tức là mình sẽ select tới element là children và chỉ đứng 1 mình nó thôi nhé!
Mình chắc rằng nhiều bạn dev sẽ làm theo cách sau, đó là chọn :first-child kết hợp thêm :last-child
Nhưng đấy chưa phải là cách duy nhất, chúng ta còn thêm vài cách khác nữa nha
Cách tiếp theo là sử dụng selector ngắn gọn nhất đó là :only-child. Mình nghĩ nhiều bạn còn không biết có tồn tại selector này nữa cơ
Và chúng ta có thêm 1 cách nữa đó là kết hợp :nth-child(1) và :nth-last-child(1)
Các cách trên đều Cross Browsers tốt hết nha mọi người. Xem thêm trên Can I Use
3. Fill màu gradient cho text [Not Cross-Browsers]
Lại 1 tip nữa liên quan đến gradient, lần này là fill màu gradient cho text, thử hỏi ngay lúc này, bạn đã nghĩ ra cách phải làm bằng cách nào chưa nhỉ?
Rất là đơn giản luôn, đó là chúng ta phải có khai báo background: linear-gradient() kết hợp với 2 thuộc tính quan trọng là -webkit-text-fill-color: transparent và -webkit-background-clip: text
.conic-gradient {
/* Original example */
background-image: conic-gradient(#fff, #000);
/* Explicitly state the location center point */
background: conic-gradient(at 50% 50%, #fff, #000);
/* Explicitly state the angle of the start color */
background: conic-gradient(from 0deg, #fff, #000);
/* Explicitly state the angle of the start color and center point location */
background: conic-gradient(from 0deg at center, #fff, #000);
/* Explicitly state the angles of both colors as percentages instead of degrees */
background: conic-gradient(#fff 0%, #000 100%);
/* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
background: conic-gradient(#fff 0deg, #000 1turn);
}
<div class="pie-chart"></div>
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red 33%, green 33% 66%, blue 66%);
}
/* Just for centering */
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
