CSS Backgrounds and Borders规范导读

Test the web forward活动中对于CSS Backgrounds and Borders规范的导读介绍

Transcript

1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. CSS Backgrounds and Borders 规范导读 Mark Dong | Adobe Evangelist 1
2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. ଽಸ
   2 §  $44
   #BDLHSPVOET
   BOE
   #PSEFSTܿٓࢲܒ
   §  భิᆩ്
   §  ܱႿ$44
   #BDLHSPVOET
   BOE
   #PSEFST֥ҩ൫σ২
   
3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. ֥ܿٓࢲܒ
   3
4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4 h p://www.donglongfei.com/articles/CSS+Backgrounds+and+Borders+Module+Level+3+CN.html ᇏ໓يၲğ
   ѓሙܿٓğ
   h p://www.w3.org/TR/css3-background/
5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5 CSS Backgrounds & Borders 3.Backgrounds Layering Multiple Background Images 9 properties: background-color … 4.Borders 3 properties: border- color,… 5.Rounded Corners Border-radius property Corner Shaping Corner Clipping Color & Style Transitions Overlapping Curves Effect on Tables 6. Border Images 6 properties: border-image-source,… Drawing the border image Effect on tables 7. Misc. Effects 2 properties: box- shadow, …
6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. New features in Level 3 : <8.3 Levels> 6
7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. New features in Level 3 : <8.3 Levels> 7
8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. భิᆩ്
   8
9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Box model 9
10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. උྟ൞ೂޅקၬ֥
    10 ҕॉ
    u"CPVU
    UIF
    $44
    
    4QFDJGJDBUJPOv
    •  7BMVFğ
    ކم֥ᆴၛࠣओم
    •  *OJUJBMğ
    
    Ԛ൓ᆴ
    •  "QQMJFT
    UPğ
    ႋႨႿଧུჭ෍
    •  *OIFSJUFEğඋྟ൞ڎॖၛ࠿ӵ
    •  1FSDFOUBHFT
    Ϥٳб֥ᆴႋھೂޅࢳ༅
    •  .FEJBğ
    උྟൡႨႿଧᇕ.FEJB
    •  $PNQVUFE
    WBMVF
    ೂޅ࠹ෘඋྟᆴ
    
11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11 උྟ൞ೂޅקၬ֥
    ğ
    7BMVF
    keyword basic data type box = border-box | padding-box | content-box
12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. උྟ൞ೂޅקၬ֥
    ğ
    7BMVF֥іղൔބྩ൥ژ 12 •  ࠫ۱ѩਙ֥Սၩ໅ሢՍ֥קၬсྶಆ҆ؿളđѩ౏ၛᆷק֥ඨ྽
    •  o]p
    ٳ۩ਆ۱ࠇ۷؟࿊ཛၩ໅ሢఃᇏ၂۱ѩ౏ᆺႵ၂۱࿊ཛсྶؿള
    •  o]]p
    ٳ۩ਆ۱ࠇ۷؟࿊ཛၩ໅ሢఃᇏ၂۱ࠇᆀ۷؟࿊ཛсྶؿളđॖၛၛ಩ၩඨ྽
    •  opٳ۩ਆ۱ࠇ۷؟࿊ཛđၩ໅ሢ෮Ⴕ࿊ཛсྶؿളđ֌ॖၛ಩ၩඨ྽
    •  o<>oႨቔٳቆ
    •  o pğၩ໅ሢྩ൥ژᆭభ֥ᆴॖၛؿളՑࠇ؟Ց
    •  oĤpğၩ໅ሢྩ൥ژᆭభ֥ᆴ൞ॖ࿊֥
    •  o\" #^pğնওݼᇏ֥၂ؓᆴၩ໅ሢྩ൥ژᆭభ֥ᆴᇀഒؿള"Ցđᆭ؟ؿള#Ցb
    
13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. ҩ൫σ২
    13
14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. CSS Test Suite Manager 14 h p://test.csswg.org/shepherd/search/testcase/status/submi ed/
15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Sample: background-repeat 15 •  TQBDF
    
    
    
    ๭ோ࣐ॖି؟֥ᇗگၛᄝ໭ླҊࡧ֥౦ঃ༯ൡႋCBDLHSPVOE
    QPTJUJPOJOH
    BSFB
    čМࣟק໊ ౵თ đಖު๭ோ߶Фࡗۯၛแԉھ౵თbֻ၂ڬބቋު၂ڬ๭ோေԨࠣ౵თшჸbೂݔCBDLHSPVOE
    QBJOUJOH
    ౵თնႿCBDLHSPVOE
    QPTJUJPOJOH౵თđପહଆൔᇗگၛแԉCBDLHSPVOE
    QBJOUJOH౵თb ᄝھٚཟ֥mCBDLHSPVOEQPTJUJPOn֥උྟᆴ߶Фޭ੻đԢ٤ᄝھٚཟીႵቀܔॢࡗಸବਆږ๭ ோđᄝᆺିಸବ၂ڬ๭ோ֥౦ঃ༯đmCBDLHSPVOEQPTJUJPOnඋྟᆴ߶ႨটקၬھٚཟМࣟ๭ோ֥ ໊ᇂb
    •  SPVOEğ
    ๭ோ࣐ॖିᇗگটൡႋCBDLHSPVOE
    QPTJUJPOJOH౵თbೂݔ໭مၛᆜඔଢ๭ோแԉđପહ߶ ᇗྍ෪٢ᆰ֞ॖၛᆜඔଢ๭ோแԉbҕ࡮mCBDLHSPVOETJ[Fඋྟᇏิ܂֥܄ൔbೂݔCBDLHSPVOE
    QBJOUJOH౵თնႿCBDLHSPVOE
    QPTJUJPOJOH౵თđପહଆൔࡼᇗگটแԉCBDLHSPVOE
    QBJOUJOH౵ თb
    Value: <repeat-style> [ , <repeat-style> ]* <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. h p://test.csswg.org/shepherd/testcase/background-repeat-round-roundup/spec/CSS3-BACKGROUND/section/3.4/ 16 … <title>CSS Test: background-repeat:round, rounding up</title> … <link rel="help" href="h p://www.w3.org/TR/css3-background/#the-background-repeat" /> … <meta name="assert" content=" e 'background-repeat: round' declaration must scale an image in one or more dimensions so it ts a whole number of times in the background positioning area." /> <style type="text/css"> div { background-image: url(support/rectangle-96x60.png); background-repeat: round; height: 212px; width: 252px; } </style> </head> <body> <p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"/></p> <p>Test passes if the above image repeats in the below rectangle 12 times exactly: 3 columns, 4 rows. e top
17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.