純代碼利用CSS3 圓角邊框和盒子陰影製做 iphone 手機效果

時間 2019-11-16

標籤代碼利用 css3 css 圓角邊框盒子陰影製做 iphone 手機效果欄目 CSS 简体版

原文原文鏈接

你們好，我是小強老師。今天咱們看下CSS3最爲簡單的兩個屬性。 css

css3給咱們帶來了不少視覺的感覺和變化，之前的圖片作的事情，不少代碼都能實現。下面小強老師給你們簡單介紹兩種最爲常見的圓角邊框和盒子陰影，同時附上一個iphone 手機效果，提供你們練習。html

1.border-radius 圓角矩形

語法格式： border-radius: 水平半徑/垂直半徑css3

只不過咱們平時都把後面的這個垂直半徑給省略了。web

圓角也有連寫的方法iphone

border-radius: 左上角右上角右下角左下角; 採起的是順時針spa

以下圖：3d

代碼以下：code

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             border:1px solid red;
11             margin:10px;
12             text-align: center;
13             line-height: 200px;
14         }
15         div:nth-of-type(1)
16         {
17             border:10px solid red;
18             border-radius: 38px/14px;
19         }
20         div:nth-of-type(2)
21         {
22             border-radius:15px;
23         }
24         div:nth-of-type(3)
25         {
26             border-radius:15px 15px 0 0 ;
27         }
28         div:nth-of-type(4)
29         {
30             border-radius:15px 0 15px 0  ;
31         }
32         div:nth-of-type(5)
33         {
34             border-radius:10px 15px 0 15px  ;
35         }
36         div:nth-of-type(6)
37         {
38             border-radius:100px;
39         }
40         div:nth-of-type(7)
41         {
42             border-radius:50%;
43         }
44         img{
45             border:5px solid #ccc;
46             border-radius:50%;
47         }
48         div:nth-of-type(8)
49         {
50             border-radius:50%;
51             height: 100px;
52         }
53         div:nth-of-type(9)
54         {
55             border-radius:100px 100px 0 0 ;
56             height: 100px;
57         }
58         div:nth-of-type(10)
59         {
60             border-radius:200px 0 0 0 ;
61 
62         }
63         div:nth-of-type(11)
64         {
65             border-radius:100px 0 100px 0 ;
66 
67         }
68 
69     </style>
70 </head>
71 <body>
72 <div>水平半徑/垂直半徑</div>
73 <div>border-radius:15px;</div>
74 <div>15px 15px 0 0 ;</div>
75 <div>15px 0 15px 0</div>
76 <div>10px 15px 0 15px  </div>
77 <div>100px</div>
78 <div>50%</div>
79 <img src="1.jpg" alt=""/>
80 <div>橢圓</div>
81 <div>半圓</div>
82 <div>扇形</div>
83 <div></div>
84 </body>
85 </html>

1.2 陰影（box-shadow）

Box-shadow: 水平陰影垂直陰影模糊距離陰影尺寸陰影顏色內外陰影;htm

裏面只有水平陰影和垂直陰影是必須的。其餘的能夠省略有默認值。blog

默認的外陰影 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>