Home > Developer > Web Develop
Reference:
Http://www.runoob.com/css3/css3-tutorial.html
The CSS3 is split into "modules". The old specification has been split into small chunks, and new ones have been added.
Some of the most important CSS3 modules are as follows:
1.CSS3 border:
With CSS3, you can create rounded borders, add shaded frames, and act as a boundary image without using a design program, such as Photoshop.
In this chapter, you will learn about the following border properties:
1. Rounded edges
<style>Div{Border:2px solid #a1a1a1;padding:10px 40px;background:#dddddd;width:300px;Border-radius:25px;}</style></Head><Body><Div>The Border-radius property allows you to add rounded borders to elements!</Div>
2. Shadows
2.CSS3 backgroundDiv
{
width:300px;
height:100px;
Background-color:yellow;
box-shadow:10px 10px 5px #888888;
}
The CSS3 contains several new background properties that provide greater background element control.
In this chapter you will learn about the following background properties:
Different background images and images are separated by commas, and all of the images appear at the top of the list as the first.
#example1 { background-image:url (img_flwr.gif), url (paper.gif); Background-position:right bottom, left top; Background-repeat:no-repeat, repeat; padding:15px;} </ style >BACKGROUND-SIZE Specifies the size of the background image. Before CSS3, the size of the background image is determined by the actual size of the image.
You can specify a background picture in CSS3, so let's re-specify the size of the background picture in a different environment. You can specify the pixel or percent size.
The size you specify is relative to the width and height of the parent element as a percentage of the size.
body{ Background:url (/try/demo_source/img_flwr.gif); background-size:80px 60px; Background-repeat:no-repeat; padding-top:40px;}The Background-origin property specifies the location area of the background image.
Background images can be placed in the Content-box, Padding-box, and Border-box areas.
div{ border:1px solid black; padding:35px; Background-image:url (' smiley.gif '); Background-repeat:no-repeat; Background-position:left;} #div1 { Background-origin:border-box;} #div2 { Background-origin:content-box;}CSS3 the Background-clip background trim property is drawn from the specified position
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>Beginner's Tutorial (runoob.com)</title> <style>#example1{Border:10px dotted Black;padding:35px;background:Yellow;}#example2{Border:10px dotted Black;padding:35px;background:Yellow;Background-clip:Padding-box;}#example3{Border:10px dotted Black;padding:35px;background:Yellow;Background-clip:Content-box;}</style></Head><Body><P>No background clipping (Border-box not defined):</P><DivID= "Example1"><H2>Lorem Ipsum dolor</H2><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam erat volutpat.</P></Div><P>Background-clip:padding-box:</P><DivID= "Example2"><H2>Lorem Ipsum dolor</H2><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam erat volutpat.</P></Div><P>Background-clip:content-box:</P><DivID= "Example3"><H2>Lorem Ipsum dolor</H2><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam erat volutpat.</P></Div></Body></HTML>
CSS3 Border and background
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
