css的webkit-box-reflect实现倒影效果代码-html代码-BFW代码库

css的webkit-box-reflect实现倒影效果代码

代码语言：html

代码描述：css的webkit-box-reflect实现倒影效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
input {
	-webkit-box-reflect: below 0px linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.25));
}

body {
	display: grid;
	place-content: center;
	min-height: 90vh;

	text-align: center;
	font-size: 2rem;
}

input {
	font-size: 2rem;
	width: 60vw;
	margin-bottom: 2rem;
	text-align: center;
}

@supports(-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)))) {
	.warning {
		display: none;
	}
}


/* Warning Box */
.warning {
	position: fixed;
	bottom: 1em;
	right: 1em;
	left: 1em;
	padding: 1em;
	border: 1px solid #ccc;
	z-index: 1;
	text-align: center;
	background: rgba(255 255 205 / 0.8);
	color: #000;
	line-height: 1.42;
}

.warning p {
	margin: 0;
	padding: 0;
}


/** Poor man's infobox */
details {
	position: fixed;
	bottom: 1em;
	right: 1em;
	line-height: 1;
	font-size: clamp(1.25rem, 2vw, 2rem);
	z-index: 9999;
}
dialog[open] {
	position: fixed;
	top: 10vmin;
	right: 10vmin;
	bottom: 10vmin;
	left: 10vmin;
	width: auto;
	height: auto;
	text-align: left;

	/* Extra CSS for Safari … */
	background: #eee;
	border: 0.25em .........完整代码请登录后点击上方下载按钮下载查看