欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

盒子阴影

程序员文章站 2022-05-03 11:43:56
h1{ /*文字阴影*/ font-size: 100px; text-shadow: 10px 3px 3px rgba(0,0,0,.5) ; } div{ /*盒子阴影*/ width: 200px; height: 200px; border: 10px solid #cccccc; /*b ......

    h1{ /*文字阴影*/
font-size: 100px;
text-shadow: 10px 3px 3px rgba(0,0,0,.5) ;
}
div{ /*盒子阴影*/
width: 200px;
height: 200px;
border: 10px solid #cccccc;
/*box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色*/
/*box-shadow:5px 5px 3px 4px rgba(0,0,0,.4);*/
box-shadow: 0 15px 30px rgba(0,0,0,.5); /*类似小米官网商品动态*/
}




<h1>三生三世十里桃花</h1>

<div></div>


盒子阴影