css绘制诺基亚105手机效果-html代码-BFW代码库

css绘制诺基亚105手机效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@font-face {font-family: "Nokia Pure Text"; src: url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.eot"); src: url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.woff") format("woff"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b0040e9e6a6db92b5c252acee3891874.svg#Nokia Pure Text") format("svg"); }

* {
	padding: 0;
	margin: 0;
	
	box-sizing: border-box;
}

body {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	        justify-content: center;
	
	padding: 2rem;
	
	font-family: 'Nokia Pure Text', -apple-system, Helvetica, sans-serif;
	line-height: 1;
	
	background: lightblue;
}

.phone {
	display: inline-block;
	
	width: 44.8mm;
	height: 107mm;
	
	padding: 2mm 2mm 8mm;
	
	color: white;
	background: -webkit-gradient(linear, left top, right top, from(#222), to(#111));
	background: linear-gradient(to right, #222, #111);
	box-shadow: inset 0 1mm 1mm #fff3, inset 0 -3mm 2mm #000c, inset 0 -9mm 2mm #fff1;
	
	border-radius: 6mm;
	border-bottom-left-radius: 7mm 6mm;
	border-bottom-right-radius: 7mm 6mm;
}

.glass {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direct.........完整代码请登录后点击上方下载按钮下载查看