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

翻译 2015年11月19日 16:28:55

阴影(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>


相关文章推荐

不充电iPhone 6也能玩两天!自带电量的手机壳

酷能量(Kuner)旗下可以为iPhone 5/5s补充电能的智能保护壳——酷壳,一向以首创无下巴的超薄、轻巧设计而受到广泛赞誉。随着越来越多的用户迁移至iPhone 6,酷能量终于要发布酷壳iPho...

可存放避孕套的iPhone手机壳“Playa Case ”

自从有了Playa Case手机壳,现在买手机壳并不只是为了保护手机设备,因为你还可以存放避孕套。这款手机壳目前仅适用于iPhone 4或者4S,主要材料是聚碳酸酯,经过特别设计,背壳内部可滑动装...

能让iPhone工作Android系统的手机壳

据丫丫网报:开发者Nick Lee一向非常喜欢折腾苹果产品,让其工作各种其他操作系统,比如成功地在Apple Watch工作Windows 95。 开发者Nick Lee一向非常喜欢折腾...

[新奇周边] 内置2400mAh电量 可以充电的手机壳上市【转载:今日头条】

万千消费者期盼的酷壳iPhone 6充电版 终于正式发售了,它可以在保证iPhone依旧轻巧的前提下,为其提供足够的电池容量扩展,让用户无需担心手机没电,即使重度使用也能安心使用一整天。酷壳iPhon...

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1.1、文字阴影 text-shado...

随便上传的手机壳

  • 2013年09月22日 00:49
  • 7.22MB
  • 下载

塑料模手机壳设计

  • 2008年04月09日 02:59
  • 162B
  • 下载

为圆角矩形卡片底部添加阴影效果

目录1.先上效果 2.再上代码 3.最后原理 1.效果2.代码不需要渐变颜色的阴影,直接使用solid填充颜色既可 ...

iphone ios uiview uilabel 边框,圆角,阴影实现

Fun with layers In this post, I’ll explain how to add a border, rounded corners, and drop shadow ...
  • xdrt81y
  • xdrt81y
  • 2012年12月20日 09:57
  • 31343

有图片带阴影的CSS圆角实例包

  • 2010年06月30日 17:01
  • 18KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆角矩形、阴影、伪元素的应用实例iphone手机壳
举报原因:
原因补充:

(最多只允许输入30个字)