CSS Tip 系列（二）

1. 基于媒体查询和 Grid 结构https://codepen.io/kevinpowell/pen/ExaNWyM<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> <li><a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a></li> <li><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li> <li><a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a></li> </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum?</p></div><style>.card { display: grid; grid-template-columns: 1fr; grid-column-gap: 2em; /* 默认接纳垂直结构 */ grid-template-areas: "name" "image" "social" "position" "description";}/* 使用媒体查询，当视口宽度大于 600px 的时候， 接纳更易于阅读的双列结构方式 */@media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; }}.profile-name { grid-area: name; }.profile-position { grid-area: position; }.profile-info { grid-area: description; }.profile-img { grid-area: image; }.social-list { grid-area: social; }</style>2. 使用 Grid 结构实现内容重叠https://codepen.io/kevinpowell/pen/ExaNmQN<div class="grid"> <img src="https://unsplash.it/200/300" alt="" class="image"> <p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae, ut soluta autem dolorum. Nesciunt dolore ipsum corporis modi magni labore voluptatibus, harum maiores!</p></div><style>.grid { display: grid; grid-template-columns: repeat(5, 1fr);}/* .image, .body 都占据一行 */.image,.body { grid-row: 1 / 2; align-self: center;}/* .image 占据第一、第二列 */.image { grid-column: 1 / 3; }/* .body 占据第二列到最后一列 */.body { grid-column: 2 / -1;}<style>3. 使用 outline 实现偏移“边框”效果https://codepen.io/kevinpowell/pen/gObLqxz使用 outline 简朴的模拟出元素边框效果，与 outline-offset 属性联合使用，还能制作出偏移“边框”效果出来。.outline { outline: 2px solid white; outline-offset: -10px;}4. border-radius 的斜线语法https://codepen.io/kevinpowell/pen/JjobxBNborder-radius 除了普通的四个值语法外，还能使用用斜线支解的、最多 8 个值的语法，后者可以越发细粒度的控制每个角的两个角半径值.border-radius { border-radius: 50px 25px / 25px 50px;}5. 配景图片从文字透出https://codepen.io/kevinpowell/pen/OJPPGwN<h2 class="image-text">This is pretty easy!</h2><style>.image-text { background-image: url(https://picsum.photos/id/865/300/100); background-size: cover; background-clip: text; color: transparent;}</style>6. 相关链接https://www.lishuaishuai.com/css/1286.html。

本文来源：泛亚电竞-www.txdtzd.com