One 、 Prefix :
-moz( for example  -moz-border-radius) be used for Firefox
-webkit( for example :-webkit-border-radius) be used for Safari and Chrome.

Two 、CSS3 Round corners ( be-all )
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

3、 ... and 、CSS3 Round corners ( Individual )
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;

Four 、CSS3 Border color in :
Use CSS3 Of border-radius attribute , If you set it border The width of is X px,
Then you can be in this border Upper use X Color , Each color shows 1px Width .
If you say your border The width of is 10 Pixel , But it only states 5 or 6 Medium color , Then the last color will be added to the rest of the width .

At present, only Firefox Support CSS3 border-colour attribute , So we just need to use -moz Prefix .

-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;

5、 ... and 、 shadow
About from CSS2 It started to have , But only Safari A browser supports it , It's still like this .
CSS3 Of box-shadow and textshadow It can be written as :box-shadow:Apx Bpx Cpx #xxx;
Apx = x Axis
Bpx = y Axis
Cpx =  Projection length
#XXX =  The usual color

#boxShadow{
border: 5px solid #111;
-webkit-box-shadow: 5px 5px 7px #999;
-webkit-border-bottom-right-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

6、 ... and 、 Simple text shadow
.textShadowSingle {
font-size: 3.2em;
color: #F5F5F5;
text-shadow: 3px 3px 7px #111;
text-align: center;
}

7、 ... and 、 Multiple text shadows :
.textShadowMultiple {
font-size: 3.2em;
color: #FFF;
text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
text-align: center;
padding: 10px 0px 5px 0px;
background: #151515;
}

8、 ... and 、 Background image / texture
CSS3 The size of the background image can be written as  background-size:Apx Bpx;
-Apx = x Axis ( Image width )
-Bpx = y Axis ( Picture height )

Best support CSS3 The background size of the browser is Safari and Opera, So we just need to use -o and -webkit Prefix .
#backgroundSize{
border: 5px solid #bd9ec4;
background:url(image_1.extention) bottom right no-repeat;
-o-background-size: 150px 250px;
-webkit-background-size: 150px 250px;
padding: 15px 25px;
height: inherit;
width: 590px;
}
Nine 、 Multi-background picture
background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
#backgroundMultiple{
border: 5px solid #9e9aab;
background:url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

Ten 、CSS3 Multiple columns ( Width )
#multiColumnWidth {
text-align: justify;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
}
11、 ... and 、CSS3 Multiple columns ( Number of columns )
#multiColumnCount {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #dedede;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #dedede;
}

Twelve 、CSS3 Embed Fonts
@font-face {
font-family: qianduanNet;
src: url("SketchRockwell.ttf");
}
.fontFace{
font-family: qianduanNet;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}

13、 ... and 、CSS3 transparent ( example 1: layer )
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }
fourteen 、CSS3 RGBA  color
div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }

15、 ... and 、CSS3 HSL
HSL Statement using hue Hue(H)、 saturation Saturation(s) And brightness Lightness(L) To set the color .
Hue Derived from the color disk :0 and 360 It's red , near 120 It's green ,240 It's blue .
Saturation The value is a percentage :0% It's grayscale ,100% Saturation is the highest
Lightness The value is also a percentage :0% It's the darkest ,50% mean value ,100% Brightest .
div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }
div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }
div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }
div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }
div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }
div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }
sixteen 、CSS3 HSLA
div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

css3 More articles on front end development

  1. HTML5+CSS3 Front end development resource integration

    HTML5+CSS3 Front end development resource integration   Push an ad Personal website :http://www.51pansou.com HTML5 Video downloading :HTML5 video HTML5 Source download :HTML5 Source code meta relevant : & ...

  2. web The front-end development -- Lots of videos -- The disseminator of culture - Dunder

    remind : If necessary , Save as soon as possible , Maybe sharing will disappear one day . 1. Wonderful taste WEB Front end development full video tutorial link : http://pan.baidu.com/s/1bf1Ow2 password : 2yyu 2. Front end of geek College ...

  3. Web The front-end development essence is recommended (jQuery、HTML5、CSS3)【 Series 12 】

    2012 year 12 month 12 Japan ,[<Web Front end developers and designers must read articles > Series 12 ] I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HT ...

  4. Web Front end development essays collection (jQuery、HTML5、CSS3)【 Series 17 】

    <Web The front-end development essence is recommended >2013 The fifth issue of ( The 17th issue ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5  and  C ...

  5. Web The front-end development essence is recommended (HTML5、CSS3、jQuery)【 Series 23 】

    <Web The front-end development essence is recommended >2014 In the first 2 period ( Total number 23 period ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share all kinds of excellent products that can improve the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5 ...

  6. Web The front-end development essence is recommended (HTML5、CSS3、jQuery)【 Series 22 】

    <Web The front-end development essence is recommended >2014 Year one ( Total issue 22 ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share all kinds of excellent products that can improve the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML ...

  7. Web Front end development essays collection (jQuery、HTML5、CSS3)【 Series 20 】

    <Web The front-end development essence is recommended >2013 The eighth issue of ( Total issue 20 ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5  and  C ...

  8. Web Front end development essays collection (jQuery、HTML5、CSS3)【 Series nineteen 】

    <Web The front-end development essence is recommended >2013 The seventh issue of ( The 19th issue ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5  and  C ...

  9. Web Front end development essays collection (jQuery、HTML5、CSS3)【 Series 18 】

    <Web The front-end development essence is recommended >2013 Issue 6 ( The 18th issue ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5  and  C ...

Random recommendation

  1. smarty Access the data in the array , If it's an associative array, use dot .

    $tpl=new Smarty();// Create a new one smarty object , I'm using Smarty-3.1.6 edition 1. Set up smarty Template path $tpl->setTemplateDir(): By default t ...

  2. Simple understanding Hibernate The concept of three states and their mutual transformation

    This article describes Hibernate The concept of three states and their mutual transformation .Java There are three states in the life cycle of an object , And transform each other . They are temporary states , Persistent state , And the free state . AD:WOT2015 Internet operation and Development Conference heat ...

  3. .Net Program ape music Android Development ---(4) Registration page layout

    Next we introduce the landing page layout , In this section , Let's take a look at the registration page layout , The page layout is similar , Let's get familiar with the use of basic controls . design sketch : 1. Join the registration page Right click to select layout Catalog , Join the registration page . For example, the following figure Click on ...

  4. Toby, learn raspberry pie GPIO

           wiringPi Suitable for those with C Language foundation , Before contacting the raspberry pie, I have already contacted the crowd of MCU or embedded development .wiringPi Of API Functions and arduino Very similar , It also makes it popular . The author gives a lot of explanations ...

  5. C# Test questions

    A software competition C# Edition of the examination questions ——[ Single topic selection ]   One . Single topic selection (10 A total of 20.0 branch ) 1. following JavaScript The correct output of the code is :(). 1 2 3 4 5 6 7 8 9 <script t ...

  6. java The data in is exported to Excel In the table

    Export data from the whole project to .Excel Source code import java.io.BufferedOutputStream; import java.io.FileInputStream; import java ...

  7. Add :MySQL Arrangement

    1. Connect Mysql Format : mysql -h The host address -u user name -p User password 1. Connected to the MYSQL. Start by opening DOS window , Then go to the directory mysql\bin, Type the command again mysql -u root ...

  8. Template method pattern (Template Method)

    1. Concept In template mode (Template Pattern) in , An abstract class publicly defines how to execute its methods / Templates . Its subclass can override method implementation as needed , But the call will take place in the way defined in the abstract class . This type of design pattern is behavioral ...

  9. wget Of Usage method

    problem : Recently in use wget , I feel that there are many functions that I can't , Now write an article , Update some wget Use skills , To prevent forgetting later , Come back and look it up . Text : It's often used now : curl -O url Download the file ...

  10. Android Created in option menu

    1. First, in the res Create a new one in the directory menu Folder , Right click res Catalog ->New->Directory, Enter folder name menu, Click on OK. Then create a new name under this folder main Menu file for , Right click me ...