圆角阴影框组件

import { ReactNode } from "react";

export default function RoundShadow({ children }: { children: ReactNode; }) {
	return <>
		<div className='shadowcontainer'>{children}</div>
		<style jsx>{`
.shadowcontainer{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	margin: 1.2rem 1.2rem;
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0.2rem 0.2rem 0.3rem #e0e0e0;
	transition: all 600ms;
}
.shadowcontainer:hover{
	box-shadow: 0.2rem 0.2rem 0.3rem #8d8b8b;
}
`}</style>
	</>;
}

(()=>{
function RoundShadow({ children }) {
	return <>
		<div className='shadowcontainer'>{children}</div>
		<style jsx>{`
.shadowcontainer{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	margin: 1.2rem 1.2rem;
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0.2rem 0.2rem 0.3rem #e0e0e0;
	transition: all 600ms;
}
.shadowcontainer:hover{
	box-shadow: 0.2rem 0.2rem 0.3rem #8d8b8b;
}
`}</style>
	</>;
}
return <RoundShadow>
Shadow around me.
</RoundShadow>;
})();