圆角矩形、阴影、伪元素的应用实例iphone手机壳

来源：互联网发布：仓鼠用品淘宝店铺编辑：程序博客网时间：2024/04/29 00:10

阴影（box-shadow）

Box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内外阴影;

里面只有水平阴影和垂直阴影是必须的。其他的可以省略有默认值。

默认的外阴影 outset 不能写，写上就看到效果

伪元素

Before after 两个伪元素

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>iphone手机壳</title><style>.iphone{width:300px;height:600px;background-color:#2e2e2e;margin:50px auto;border:10px solid #3b3b3b;border-radius:30px;box-shadow:5px 5px 5px rgba(0,0,0,0.5);position:relative;}.iphone::before{content:"";width:66px;height:6px;background-color:#2e2e2e;position:absolute;top:-16px;right:60px;border-radius:3px 3px 0 0;}.iphone::after{content:"";position:absolute;width:6px;height:45px;background-color:#2e2e2e;border-radius:3px 3px 0 0;left:-16px;top:100px;}.light{width:8px;height:8px;border:3px solid #4a4a4a;background-color:#1a1a1a;border-radius:50%;margin:10px auto;margin-top:30px;box-shadow:2px 2px 2px rgba(0,0,0,0.5);}.speaker{width:70px;height:5px;border:3px solid #4a4a4a;background-color:#1a1a1a;border-radius:16px;margin:0px auto;box-shadow:2px 2px 2px rgba(0,0,0,0.5);}.content{width:270px;height:450px;background-color:#0a0a0a;margin: 20px auto 0;border-radius:10px;border:4px solid #1a1a1a;color:#fff;text-align:center;font:35px/450px "微软雅黑";}.home{width:50px;height:50px;border-radius:50%;background-color:#1a1a1a;margin:8px auto;position:relative;}.home::before{content:"";width:20px;height:20px;position:absolute;border-radius:3px;top:14px;left:14px;border:2px solid #fff;}</style></head><body><div class="iphone"><div class="light"></div>    <div class="speaker"></div>    <div class="content">iphone8</div>    <div class="home"></div></div></body></html>

0 0