Tutorial 4Topic: CSS 3.0
Tutorial 4 Topic: CSS 3.0
What is CSS 3.0?Aspreviouslymentioned,CsSstandsforCascadingStyleSheets,whichdescribeshowHTMLelementsaretobedisplayedCSS3.0 isthelateststandardforCSS,and alsocompletelybackwards-compatiblewithearlierversionsofCssInthistutorial,wewilldiscuss somenewfeaturesinCss3.0
What is CSS 3.0? As previously mentioned, CSS stands for Cascading Style Sheets, which describes how HTML elements are to be displayed. CSS 3.0 is the latest standard for CSS, and also completely backwards-compatible with earlier versions of CSS. In this tutorial, we will discuss some new features in CSS 3.0
Border-Radius PropertyWith CSS 3.0, you can give any element"rounded corners", byusingtheborder-radiuspropertyItisnormallyusedlikethis:#rcorners14Rounded corners!border-radius:5epx;background：#73AD21padding:20px;width:200px;height:150px;
Border-Radius Property With CSS 3.0, you can give any element "rounded corners", by using the border-radius property. It is normally used like this:
Border-Radius PropertyHere are the rules:Four values:first value applies to top-left, second value applies to top-right, third value appliesto bottom-right, and fourthvalue applies to bottom-left cornerThreevalues:first value applies totop-left, second value applies totop-right and bottom-leftandthirdvalueappliestobottom-rightTwovalues:firstvalueappliestotop-leftandbottom-rightcorner,andthesecondvalueappliestotop-rightandbottom-leftcornerOnevalue:all fourcorners areroundedequallyrners4border-radius:5px25px45px65pxabackground:#73AD21padding:20px;width:200px;height:150px;
Border-Radius Property Here are the rules: Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner One value: all four corners are rounded equally
Border-Image PropertyThe Css 3.o border-image propertyallows you to specify an imagetobeused instead ofthenormalborderaroundanelement.Theproperty has threeparts:The imagetouseastheborderWhereto slice the imageDefinewhetherthemiddle sections should be repeatedorstretchedbkit-burl(bonder-png)30/Sat1-5-//*Opera11-12.1-/der.png)30Here, the middle sections of the image are repeated to create the border.Original Image:
Border-Image Property The CSS 3.0 border-image property allows you to specify an image to be used instead of the normal border around an element. The property has three parts: The image to use as the border Where to slice the image Define whether the middle sections should be repeated or stretched Original Image: