css3 彩带扩散效果_CSS3 扩散的阴影-CSDN博客

本文链接：https://blog.csdn.net/weixin_28750379/article/details/111904053

本文展示了如何利用CSS3的特性，如绝对定位、box-shadow和rgba颜色，来创建一个具有扩散效果的彩带阴影。通过设置不同元素的样式和属性，实现了背景颜色、阴影大小和透明度的动态变化，营造出吸引人的视觉效果。

摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

@import 'https://fonts.googleapis.com/css?family=Fjalla+One|Raleway';

* {

box-sizing: border-box;

}

html {

font-size: 62.7%;

}

html, body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 100%;

background-color: #f2f2f2;

font-family: 'Raleway', sans-serif;

}

h1 {

text-transform: uppercase;

font-size: 36px;

font-size: 3.6rem;

font-family: 'Fjalla One', sans-serif;

padding: 10px 0 5px 0;

padding: 1rem 0 0.5rem 0;

margin: 0;

}

p {

font-size: 16px;

font-size: 1.6rem;

line-height: 1.7;

text-align: center;

margin: 0;

padding: 0;

width: 75%;

}

.container {

position: relative;

display: inline-block;

background-color: white;

width: 65%;

height: 45%;

min-height: 321px;

min-height: 32rem;

}

.container .layer {

position: absolute;

background-color: white;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.container .layer .content {

width: 100%;

padding: 16px;

padding: 1.6rem;

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.container .layer .shadow {

content: '';

position: absolute;

width: 90%;

left: 5%;

bottom: 1px;

bottom: 0.1rem;

height: 80px;

height: 8rem;

background-color: hotpink;

box-shadow: 0 1.2rem 5rem rgba(0, 0, 0, 0.2);

}