公司动态

CSS Tip 系列(二)

2022-06-05 00:47 阅读次数:

本文摘要:1. 基于媒体查询和 Grid 结构https://codepen.io/kevinpowell/pen/ExaNWyMdiv class=card img src=https://i.pravatar.cc/125?image=3 alt= class=profile-img ul class=social-list lia href=# class=social-linki class=fab fa-dribbble-square/i/a/li lia href=# c

完美体育APP网页版登录

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。


本文关键词:完美体育APP网页版登录,CSS,Tip,系列,二,基于,媒体,查询,和,Grid,结构

本文来源:完美体育APP网页版登录-www.shicaidj.com