纯代码利用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)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...

随机推荐

php获取文章内容中的全部图片数组
<?php $pattern="/<img.*?src=[\'|\"](.*?(?:[\.gif|\.jpg]))[\'|\"].*?[\/]?>/&q ...
mysql学习（四）-字段类型
mysql数据类型: 数值型: 整形:int 浮点型:float double decimal:定点型日期: date '2012-01-02' time '10:01:01' datetime ...
php中date函数获取当前时间的时区误差解决办法
例:echo date('Y-m-d H:i:s', time()); 输出时间:2008-10-12 02:32:17 但实际时间是:2008-10-12 10:32:17时间误差8个小时 PHP手 ...
Flex4开发笔记(与JAVA交互)
(由于本人也是第一次接触flex开发,因此将开发过程中问题记录留档) 一.数据交换过程借助BlazeDS可以实现flex与java之间的数据交互,大体流程如下: 1.导入blazeds的文件(配置w ...
SendMessage的返回值，就是由相应的响应消息函数的返回值（解释的简洁明了）
SendMessage Return Values The return value specifies the result of the message processing and depend ...
MyBatis 最常见错误，启动时控制台无限输出日志
你是否遇到过下面的情况,控制台无限的输出下面的日志: Logging initialized using ‘class org.apache.ibatis.logging.log4j.Log4jImp ...
POJ1185 炮兵阵地状态压缩
因为不知道不同的博客怎么转,就把别人的复制过来了,这个题解写的非常好,原地址为: http://hi.baidu.com/wangxustf/item/9138f80ce2292b8903ce1bc7 ...
前端开发工具—fiddle
BeanUtils\DBUtils
BeanUtil: 需要导入 beanutil包和logging日志包用于给对象属性赋值. setProperty与copyProperty区别: 这个问题搁置,还不会. 将map数据拷贝到对象中, ...
翻转View
翻转View by 伍雪颖 CGContextRef context = UIGraphicsGetCurrentContext(); [UIView beginAnimations:nil cont ...

纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果