|
Answer» CSS3 is the latest evolution extending CSS2. It has a lot of new features like selectors, rounded corners, border-image, text-shadow, BOX-shadow, transitions, animations, GRADIENTS, and grid LAYOUTS. Let us discuss each of them below. - Selectors: Selectors are used to selecting the content which you want to add styles too. There are five types of selectors in CSS.
- Type Selector (Element Selector)
- ID Selector
- Class Selector
- Universal Selector
- Attribute Selector
- Rounded Corners: Using this feature, we can apply smooth corners to any element. The border-radius property is used to give the element smooth edges. Check out the example below for syntax and usage.
<!DOCTYPE html>
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div id="rcorner"></div>
</body>
</html>- Border Image: border-image property allows us to use an image as a border. Check the example below for syntax and usage.
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p id="borderimg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ut esse, accusamus id totam ipsam voluptatum MAGNI. Aliquam, ipsa ipsum! Soluta optio quia recusandae qui sed suscipit. Dolorem, libero obcaecati.</p>
</body>
</html>- Shadow: It’s an effect which can be applied to text and box. text-shadow and box-shadow are the property names used to added shadow to text and box respectively.
- Transitions: CSS Transitions allows us to change the values of the transition property smoothly.
- Gradients: We can directly use gradients in for two or more colors using linear-gradient and radial-gradient properties.
- Grid Layouts: We have two new display properties which are grid and inline-grid which offers us a grid-based layout with similar rows and columns concept.
|
