纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
大家好，我是小强老师。 今天我们看下CSS3最为简单的两个属性。
css3给我们带来了很多视觉的感受和变化，以前的图片做的事情，很多代码都能实现。 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影，同时附上一个iphone 手机效果，提供大家练习。
1.border-radius 圆角矩形
语法格式： border-radius: 水平半径/垂直半径
只不过我们平时都把后面的这个垂直半径给省略了。
圆角也有连写的方法
border-radius: 左上角 右上角 右下角 左下角; 采取的是 顺时针
如下图：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border:1px solid red;
margin:10px;
text-align: center;
line-height: 200px;
}
div:nth-of-type(1)
{
border:10px solid red;
border-radius: 38px/14px;
}
div:nth-of-type(2)
{
border-radius:15px;
}
div:nth-of-type(3)
{
border-radius:15px 15px 0 0 ;
}
div:nth-of-type(4)
{
border-radius:15px 0 15px 0 ;
}
div:nth-of-type(5)
{
border-radius:10px 15px 0 15px ;
}
div:nth-of-type(6)
{
border-radius:100px;
}
div:nth-of-type(7)
{
border-radius:50%;
}
img{
border:5px solid #ccc;
border-radius:50%;
}
div:nth-of-type(8)
{
border-radius:50%;
height: 100px;
}
div:nth-of-type(9)
{
border-radius:100px 100px 0 0 ;
height: 100px;
}
div:nth-of-type(10)
{
border-radius:200px 0 0 0 ; }
div:nth-of-type(11)
{
border-radius:100px 0 100px 0 ; } </style>
</head>
<body>
<div>水平半径/垂直半径</div>
<div>border-radius:15px;</div>
<div>15px 15px 0 0 ;</div>
<div>15px 0 15px 0</div>
<div>10px 15px 0 15px </div>
<div>100px</div>
<div>50%</div>
<img src="1.jpg" alt=""/>
<div>椭圆</div>
<div>半圆</div>
<div>扇形</div>
<div></div>
</body>
</html>
1.2 阴影（box-shadow）
Box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;
里面只有水平阴影和垂直阴影是必须的。其他的可以省略有默认值。
默认的外阴影 outset 不能写，写上就看不到效果
1.3 CSS3iphone 手机的写法
先看效果图吧：
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #aaa;
}
.iphone5s{
width: 300px;
height:600px;
margin:50px auto;
background-color: #2e2e2e;
border:10px solid #3b3b3b;
border-radius: 55px;
position: relative;
box-shadow: 3px 5px 5px rgba(0,0,0,0.5);
}
.iphone5s:before
{ content: "";
position: absolute;
width: 66px;
height: 6px;
background-color: #2e2e2e;
right:60px;
top:-16px;
border-radius: 3px 3px 0 0;
}
.iphone5s:after{
content: "";
position: absolute;
height: 45px;
width: 6px;
background-color: #2e2e2e;
left:-16px;
top:100px;
}
.listen{
width: 6px;
height:6px;
background-color: #1a1a1a;
border:3px solid #4a4a4a;
position: absolute;
top:30px;
left:50%;
margin-left:-8px;
border-radius: 50%;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5); }
.speaker{
width: 60px;
height:5px;
border:5px solid #4a4a4a;
background-color: #1a1a1a;
position: absolute;
left:50%;
margin-left:-35px;
top:50px;
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5); }
.content{
width: 250px;
height: 450px;
background-color: #0a0a0a;
margin:80px auto 0;
font:35px/450px "微软雅黑";
text-align: center;
color:white;
border:4px solid #1a1a1a;
position: relative; }
.content:before{
content: "";
width: 250px;
height: 450px;
position: absolute;
top:0;
left:0;
background: -webkit-linear-gradient(top left,rgba(255,255,255,0.3),rgba(255,255,255,0) 80%)
}
.home{
width: 50px;
height: 50px;
background-color: #1a1a1a;
border-radius: 50%;
margin:5px auto 0;
position: relative;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset;
}
.home:before{
content: "";
width: 20px;
height: 20px;
border:2px solid rgba(255,255,255,0.7);
position:absolute;
top:13px;
left:13px;
border-radius: 3px; }
</style>
</head>
<body>
<div class="iphone5s">
<div class="listen"></div>
<div class="speaker"></div>
<div class="content">
iphone 5s
</div>
<div class="home"></div>
</div>
</body>
</html>
嘻嘻，怎么样，很简单吧，喜欢，就赶紧自己动手写一下吧！ 感谢CSS3给我们带来的好处。 我是小强老师
纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果的更多相关文章
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- css3圆角边框
圆角边框 一.border-radius属性简介 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...
- 纯代码实现CSS圆角
我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角 #chaomao{ border-radius:2px 2 ...
- css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
- 盒子显隐，伪类边框，盒子阴影,2d平面形变
-盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...
- CSS3圆角边框的使用-遁地龙卷风
0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 利用css3实现超出文本指定行数与省略号效果
<style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...
- CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
随机推荐
- android笔试题
1.请谈一下Android系统的架构. 答:Android系统采用了分层架构,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层. 2.谈谈android大众常用的五种布 ...
- Thinkphp的时间判断
在做项目的过程中,非常频繁地遇到时间这个问题,像时间的比较,特定时间执行某一操作,但是现在只解决了一部分问题,先说明一下时间的判断问题. 很简单,时间,不断使date(),now(),都是字符串类型的 ...
- 黑马程序员-- C语言交换两个整数变量值几种函数比较
总结了C语言中几种交换两个整数数值的函数,欢迎交流 #include <stdio.h> 使用多种交换变量值的函数比较 方法一:使用第三方临时变量 这种函数a,b只是值传递,实质上不能修交 ...
- Python Tensorflow下的Word2Vec代码解释
前言: 作为一个深度学习的重度狂热者,在学习了各项理论后一直想通过项目练手来学习深度学习的框架以及结构用在实战中的知识.心愿是好的,但机会却不好找.最近刚好有个项目,借此机会练手的过程中,我发现其实各 ...
- MYSQL 用户
MYSQL 并没有与SQL Server一样的两个级别的主体,它只有user. user 的信息都保存在mysql 数据库的 user 表中:我想也可以用insert 的方式新建用户,只是这种尝试还没 ...
- 如何彻底卸载sql server 2012
好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净的话,重新安装会出问题,所以下面就总结一些方法: ...
- Exchange Web Service 获取邮件的附件并保存到本地的示例代码
private static void DownLoadMailAttachments(ExchangeService service, ItemId itemId) { EmailMessage m ...
- Umbraco安装权限问题
当安装或升级,甚至是使用Umbraco时,如果出现一些莫名其妙的问题. 估计都是权限出了问题,用心参考下文: https://our.umbraco.org/documentation/Getting ...
- Storm csdn
blog.csdn.net/lonelytrooperblog.csdn.net/leytton http://my.oschina.net/apdplat/blog/308396
- Qt for Linux：环境搭建（CentOS 6.5 32位）——完全从零安装
正文开始前,我们假设,用户可以操作终端 拥有root权限,以下所有操作也均由root完成 可以上网 安装了CentOS 6.5 32位 注:红色部分,每个人可能都不一样 话不多说,列出本章大致流程 1 ...