CSS3画图3-手机模型

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<style type="text/css">

body{

background-color:#CCC;}

#phone{

width:250px;

height:500px;

background-color:#2e2e2e;

margin:60px auto;

border:#3b3b3b solid 10px;

border-radius:50px;

box-shadow:3px 5px 5px 1px rgba(0,0,0,0.5);

position:relative;

}

#phone:before{

content:‘‘;

width:50px;

height:6px;

background-color:#2e2e2e;

display:block;

position:absolute;

top:-16px;

left:150px;

border-radius:3px 3px 0px 0px;}

#phone:after{

content:‘‘;

width:6px;

height:50px;

background-color:#2e2e2e;

display:block;

position:absolute;

left:-16px;

top:60px;

border-radius:3px 3px 0px 0px;}

#camera{

width:6px;

height:6px;

border:#4a4a4a solid 3px;

margin:20px auto 0px;

border-radius:50%;

box-shadow:1px 2px 2px rgba(0,0,0,0.5);}

#headphone{

width:60px;

height:5px;

border:#4a4a4a solid 4px;

margin:13px auto;

border-radius:10px;

box-shadow:1px 2px 2px rgba(0,0,0,0.5);

}

#screen{

width:220px;

height:360px;

margin:15px auto 0px;

background-color:#0a0a0a;

border:#1a1a1a solid 4px;}

#btn{

width:40px;

height:40px;

background-color:#1a1a1a;

margin:8px auto 0px;

border-radius:50px;

box-shadow:2px 2px 2px rgba(0,0,0,0.5) inset;

overflow:hidden;  /*阻止边界的传导*/}

#btn:before{

content:‘‘;

width:20px;

height:20px;

border:#fff solid 2px;

display:block;

margin:9px auto;

border-radius:5px;

}

</style>

<body>

<div id="phone">

<div id="camera"></div>

<div id="headphone"></div>

<div id="screen"></div>

<div id="btn"></div>

</div>

</body>

</html>

版权声明:博主原创文章,转载请说明出处。http://blog.csdn.net/dzy21

时间: 07-20

CSS3画图3-手机模型的相关文章

CSS制作华为mate8手机模型示例

CSS制作华为mate8手机模型效果图 1.HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="phone"> <div class="body"></div> &

CSS3自适配手机屏幕[转]

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-sc

深入理解 CSS3 弹性盒布局模型

Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求.它的优势在于开发人员只是声明布局应该

8.2 css3 新增标签 盒子模型 长度单位 颜色 渐变 径像渐变

# CSS3 盒子模型 * box-sizing   值 content-box 默认值 包括所有的值 /                    border-box 只算边框的长与宽 * resize(调节框的大小) *    值 none不允许 / horizontal调节宽度 / vertical调节高度 / both都可以 * outline轮廓边框   `outline:width style color` * outline-width * outline-color * outli

CSS3画图

众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用border边框属性可以画出各种三角形,矩形,用border-radius可以画出何种圆形.扇形.圆弧型,利用内置阴影外置阴影可以有各种投影效果,只要你去尝试就好发现可以出来各种形状 结合实践画了个会动的小黄人 地址http://play.163.com/special/minions/ 实践中的收

css3完美解决手机横竖屏判断,让用户看邀请函更爽

html: <div id="cover1"></div> <p id="cover1w">亲,请竖屏观看本屏内容,谢谢^_^</p> css: /* 判断手机横竖屏  */ @media screen and (orientation:portrait) { /*  css[竖向定义样式]  */ #cover1{display: none;width: 100%;height: 100%;background-co

CSS3伸缩布局盒模型 - Flexbox基础知识

我们知道在CSS2中,可以使用“浮动”和“定位”来改变盒子在文档流中的显示方式.这两种方式也是目前广泛使用的布局方式,但是在实践过程中会发现有些特殊的布局没法或者很难通过这两种方式来实现.在CSS3中映入了伸缩布局盒模型的概念,这样可以使得某些难以实现的布局变得非常轻松. 使用Flexbox(Flexible Box)可以很好解决以下问题: 1,作为容器的盒子的宽度.高度等可以被其子元素改变.主要体现在改变子元素的宽高来填充可用空间或者防止溢出父元素 2,可以改变子元素的布局方向或者顺序. Fl

CSS3画图2

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘图</title> </head> <style type="text/css"> div{ width:200px; height:200px; border:#F00 solid 1px; margin-bottom:10px; text-

CSS3 可视化的格式模型

9.1 可视化格式模型介绍 本章和下一章描述了可视化格式模型:这种模型用于定义用户代理是怎样在可视化媒体(visual media)上处理文档树的. 在这个模型里,文档树上的每一个元素都会生成零个,一个或者多个盒子(根据盒子模型),这些盒子的布局由以下内容决定: 盒子的尺寸和类型 定位机制(普通流式(normal flow),浮动(float),绝对(absolute)定位) 文档树中各元素之间的关系 其他额外信息(例如,视口尺寸,图片的固有尺寸) 本章和下一章定义的属性同样适用于连续类媒体(c