chrome css写法 |css 讨论页面模板

/* 1. Box-sizing */
* {
box-sizing: border-box;
}
/* 2. Flexbox */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 3. Grid */
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
/* 4. Media Queries */
@media (max-width: 768px) {
.child {
width: 100%;
}
}
/* 5. Transitions */
.child {
transition: all 0.3s ease-in-out;
}
/* 6. Animations */
@keyframes myAnimation {
from { background-color: red; }
to { background-color: blue; }
}
.child {
animation: myAnimation 2s infinite;
}
/* 7. Variables */
:root {
--color-primary: #007bff;
}
.child {
color: var(--color-primary);
}
/* 8. Pseudo-Classes and Elements */
a:hover {
color: red;
}
.child::before {
content: "Hello";
}
/* 9. Transformations */
.child {
transform: rotate(45deg);
}
/* 10. Filters */
.child {
filter: grayscale(100%);
}