With CSS3, you can create rounded borders, add shadows to rectangles, use pictures to draw borders
border-radius: Create rounded corners border box-shadow add shadow border-image draw border with image
div
{
border-radius:25px;
}
div
{
box-shadow: 10px 10px 5px #888888;
}
div
{
border-image:url(border.png) 30 30 round;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>
The <div>border-radius property allows you to add rounded corners to an element. </div>
</body>
</html>
2 CSS3 Background
Property Description CSS
background-clip Specifies the drawing area of the background.
background-origin specifies the positioning area of the background image. (Placed in content-box, padding-box or border-box)
background-size Specifies the size of the background image.
3 CSS3 Text Effects CSS3 includes several new text features.
3.1 text-shadow The text application shadow
options are horizontal shadow, vertical shadow, blur distance, and the color of the shadow:
h1 { text-shadow: 5px 5px 5px #FF0000; }
3.2 The word-wrap attribute allows you to allow the text to force the text to wrap even if it means splitting words:
<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
3.4 The @font-face rule (referring to http://www.w3school.com.cn/css3/css3_font.asp)
defines the specified font
4 CSS3 transforms, you can use 2D or 3D transforms to transform your elements. (Refer to http://www.w3school.com.cn/css3/css3_2dtransform.asp)
Through CSS3 transformation, we can move, zoom, rotate, elongate or stretch elements.
4.1 translate(): Through the translate() method, the element moves from its current position, according to the given left (x coordinate) and top (y coordinate) Position parameters:
4.2 rotate(): Through the rotate() method, the element is clockwise Rotate the given angle. Negative values are allowed and the element will be rotated counterclockwise.
div
{
transform: rotate(30deg); //Rotate 30 degrees to allow negative values, the element will rotate counterclockwise.
}
4.3 scale()
Through the scale() method, the size of the element will increase or decrease, according to the given width (X axis) and height (Y axis) parameters:
the value scale(2,4) Convert the width to the original size 2x, converts the height to 4x the original height.
div
{
transform: scale(2,4);
}
4.4 skew()
With the skew() method, the element is flipped by a given angle, according to the given horizontal (X-axis) and vertical (Y-axis) parameters:
the value skew(30deg,20deg) flips the element 30 degrees around the X-axis and around the Y-axis Flip 20 degrees
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div # div2
{
transform:skew(30deg,20deg);
}
</style>
</head>
<body>
<div>Hello. This is a div element. </div>
<div id="div2">Hello. This is a div element. </div>
</body>
</html>
5 CSS3 transitions
CSS3 transitions are the effect of elements gradually changing from one style to another.
To achieve this, two things must be specified: Specify which CSS property you want the effect to be added to, and specify the duration of the effect
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s; //The transition effect applied to the g height and width properties, the duration is 2 seconds
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);//rotate 180 degrees
}
</style>
</head>
<body>
<div> Place your mouse pointer over the yellow div element to see the transition. </div>
<p><b>Note:</b> This example does not work in Internet Explorer. </p>
</body>
</html>
6 CSS3 Multiple Columns (refer to http://www.w3school.com.cn/css3/css3_multiple_columns.asp)
With CSS3, you can create multiple columns to lay out your text - just like a newspaper!
column-count : The column-count attribute specifies the number of columns by which elements should be separated:
column-gap : The column-gap attribute specifies the gap between columns
column-rule: The column-rule attribute sets the width, style and color rules between columns .