随笔分类 - CSS3
摘要：button:focus-visible, input:focus-visible, a:focus-visible { border-color: #1e88e5; box-shadow: 0 0 3px 2px rgba(30, 135,229,0.5); }
阅读全文
摘要：.balanced-text h2 { color: yellow; text-wrap: balance; } .unbalanced-text h2 { color: rgb(252, 1, 218); }
阅读全文
摘要：ul li { border: 2px solid gray; border-radius: 8px; padding: 1rem; margin: 1rem; } // old way ul li input:checked { accent-color: #f806e4; } // new wa
阅读全文
摘要：The cards on the DJI site have an effect where the hovered card expands and the other cards shrink: In order to emulate this effect we'll use Flexbox.
阅读全文
摘要：Currently we are animating to a fixed height of 100px on hover since browsers can't animate from 0 to auto: <p class="h-0 overflow-hidden text-white/7
阅读全文
摘要：When Virtual keyboard popup, we can relayout the UI element accordingly: navigator.virtualKeyboard.overlaysContent = true; navigator.virtualKeyboard.s
阅读全文
摘要：z-index property arranges how an element is stacked onto other positioned elements. At times you may set a z-index property on a child element to be l
阅读全文
摘要：You only require a few lines of CSS to enable a dark/light mode on your website. You just need to let browsers know that your website can display corr
阅读全文
摘要：This trick is inclined towards improving copy and paste experience for website users. Using user-select: all, you can enable easy text selection with
阅读全文
摘要：You don't have to get stuck on how the browser renders a numbered list. You can implement your own design utilizing counters(). Here's how: ul { margi
阅读全文
摘要：Try throttling to a slow internet in the browser Dev tools and visit a website made up of HD images like unsplash. That's how to experience the pain o
阅读全文
摘要：When working with positioned elements, you often write code like this: .some-element { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } Thi
阅读全文
摘要：p.intro { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* Truncate when no. of lines exceed 3 */ overflow:
阅读全文
摘要：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries .container { container: article / inline-size; } h2 { font-size: 7cqw; } @conta
阅读全文
摘要：The margin-trim property allows the container to trim the margins of its children where they adjoin the container's edges. https://developer.mozilla.o
阅读全文
摘要：html: <div class="post"> <h2>Post</h2> <a href="#"> a link</a> </div> <div class="post"> <h2>Post</h2> </div> <div class="post"> <a href="#"> a link</
阅读全文
摘要：Those css properties will promot to a new layer
阅读全文
摘要：We only want to access <li>One</li> B: '+' sinbling selector, if we don't have second uland replaced with a li, then it is targeting this li; which is
阅读全文
摘要：font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; auto The font display strategy is defined
阅读全文
摘要：So higher rank css will override lower rank css rules. Inline styles will override any other css rules. h1:not(.small-text) // 0011 - :not is not coun
阅读全文
