原文:

大家好，我是小强老师。 今天我们看下CSS3最为简单的两个属性。     

css3给我们带来了很多视觉的感受和变化，以前的图片做的事情，很多代码都能实现。 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影，同时附上一个iphone 手机效果，提供大家练习。

1.border-radius 圆角矩形

 语法格式： border-radius:  水平半径/垂直半径

  只不过我们平时都把后面的这个垂直半径给省略了。

   圆角也有连写的方法

    border-radius: 左上角  右上角  右下角  左下角;            采取的是 顺时针

  如下图：

    

 代码如下：

    

1  2  3  4     
      5      6     70 71 72 
     
      水平半径/垂直半径
     
73 
     
      border-radius:15px;
     
74 
     
      15px 15px 0 0 ;
     
75 
     
      15px 0 15px 0
     
76 
     
      10px 15px 0 15px  
     
77 
     
      100px
     
78 
     
      50%
     
79 80 
     
      椭圆
     
81 
     
      半圆
     
82 
     
      扇形
     
83 
     
84 85 

1.2 阴影（box-shadow）

Box-shadow: 水平阴影 垂直阴影 模糊距离  阴影尺寸 阴影颜色 内外阴影;

 里面只有水平阴影和垂直阴影是必须的。其他的可以省略有默认值。

 默认的外阴影 outset  不能写，写上就看不到效果

1.3 CSS3iphone 手机的写法

先看效果图吧：

 

  

 

 完整代码如下：

   

    
                 
     
        
      
        
      
        
      
                   iphone 5s        
      
        
      
    
     

  嘻嘻，怎么样，很简单吧，喜欢，就赶紧自己动手写一下吧！ 感谢CSS3给我们带来的好处。 我是小强老师