標籤：style blog http color os io strong 2014
所需圖片：
corners-type1 corners-type2 corners-type3 corners-type4 corners-type5 roundedbox-type5-bg
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Previe of Type 4 - Easy rounded corners, by Ignacio Ricci (www.ignacioricci.com)</title><style>body {margin:0; padding:40px; font:76% Georgia, "Times New Roman", Times, serif; background:#FFF;}/* Rounded-cornered divs -*/.roundedBox {position:relative; padding:17px; margin:10px 0;}/*- All the corners -*/.corner {position:absolute; width:17px; height:17px;}/*- Each corner -*/.topLeft {top:0; left:0; background-position:-1px -1px;}.topRight {top:0; right:0; background-position:-19px -1px;}.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}.bottomRight {bottom:0; right:0; background-position:-19px -19px;}/*- Type1 - Blue -*/ #type1 {background-color:#CCDEDE;}#type1 .corner {background-image:url(img/corners-type1.gif);}/*- Type2 - Green -*/#type2 {background-color:#CDDFCA;}#type2 .corner {background-image:url(img/corners-type2.gif);}/*- Type3 - Violet -*/#type3 {background-color:#D3CADF;}#type3 .corner {background-image:url(img/corners-type3.gif);}/*- Type4 - Red with border -*//* We change the corners‘ position and add the border */#type4 {background-color:#CCACAE; border:1px solid #AD9396;}#type4 .corner {background-image:url(img/corners-type4.gif);}#type4 .topLeft {top:-1px; left:-1px;}#type4 .topRight {top:-1px; right:-1px;}#type4 .bottomLeft {bottom:-1px; left:-1px;}#type4 .bottomRight {bottom:-1px; right:-1px;}/*- Type5 - With gradient -*//* We change the top corners‘ height, and the bottom corners background-position. We must also add to the containing div a gradient to repeat in x. */#type5 {background:#FECBCA url(img/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}#type5 .corner {background-image:url(img/corners-type5.png);}#type5 .topLeft,#type5 .topRight {height:140px;}#type5 .bottomLeft {background-position:-1px -142px;}#type5 .bottomRight {background-position:-19px -142px;} </style></head><body> <!-- Type1: Blue --> <div class="roundedBox" id="type1"> <strong>My content in roundedBox Type 1</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type2: Green --> <div class="roundedBox" id="type2"> <strong>My content in roundedBox Type 2</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type3: Violet --> <div class="roundedBox" id="type3"> <strong>My content in roundedBox Type 3</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type4: Red with border --> <div class="roundedBox" id="type4"> <strong>My content in roundedBox Type 4</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type5: With gradient --> <div class="roundedBox" id="type5"> <strong>My content in roundedBox Type 5</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div></body></html>
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
