Question

我想知道与此css代码等效的代码是什么？

另一方面，我可以写一些与之相当的代码吗？我不能在我的项目中使用这个代码，因为当我使用它时，该项目页面布局将会损坏。

您可以看到代码here。我想在项目中将它用作卡片。

更新：   另一方面，我想编写这段代码，所以我不必使用<ul class="cards"> <li class="cards__item"> <div class="card"> <div class="card__image card__image--fence"></div> <div class="card__content"> <div class="card__title">Flex</div> <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p> <button class="btn btn--block card__btn">Button</button> </div> </div> </li> </ul>。   因为*, *::before, *::after { box-sizing: border-box; } img { height: auto; max-width: 100%; vertical-align: middle; } .btn { background-color: white; border: 1px solid #cccccc; color: #696969; padding: 0.5rem; text-transform: lowercase; } .btn--block { display: block; width: 100%; } .cards { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .cards__item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; } @media (min-width: 40rem) { .cards__item { width: 50%; } } @media (min-width: 56rem) { .cards__item { width: 33.3333%; } } .card { background-color: white; border-radius: 0.25rem; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .card:hover .card__image { -webkit-filter: contrast(100%); filter: contrast(100%); } .card__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; } .card__image { background-position: center center; background-repeat: no-repeat; background-size: cover; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; -webkit-filter: contrast(70%); filter: contrast(70%); overflow: hidden; position: relative; -webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); } .card__image::before { content: ""; display: block; padding-top: 56.25%; } @media (min-width: 40rem) { .card__image::before { padding-top: 66.6%; } } .card__image--flowers { background-image: url(https://unsplash.it/800/600?image=82); } .card__image--river { background-image: url(https://unsplash.it/800/600?image=11); } .card__image--record { background-image: url(https://unsplash.it/800/600?image=39); } .card__image--fence { background-image: url(https://unsplash.it/800/600?image=59); } .card__title { color: #696969; font-size: 1.25rem; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; } .card__text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.25rem; }是通用的，我只需要使用我的css代码的一部分。

更新2：

using (var consumer = new Consumer<Ignore, string>(config, null, new StringDeserializer(Encoding.UTF8))

CSS代码：

<elem [...]="..."><elem>

Answer 1

尝试将其格式化为：

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

如果这不起作用，您只需要定位您想要成为边框的特定内容而不影响整个布局：

.some-class-here {
  box-sizing: border-box;
}

与此css代码等效的代码是什么？

1 个答案: