Home > Developer > Web Develop
CSS3 drawing 3-mobile phone model, css3 drawing 3-
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </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.5, 0 );
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.5, 0 );}
# Headphone {
Width: 60px;
Height: 5px;
Border: # 4a4a4a solid 4px;
Margin: 13px auto;
Border-radius: 10px;
Box-shadow: 1px 2px 2px rgba (0.5, 0 );
}
# 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;/* block boundary transmission */}
# 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>
Copyright statement: original post of the blogger. For details, refer to the source. Http://blog.csdn.net/dzy21
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
