CSS3 introduced many new features and enhancements to the CSS specification. Below are some of the notable CSS3 features with examples: 1. Border Radius: Allows you to create rounded corners for elements.

   /* CSS3 */
   .box {
     border-radius: 10px;
   }

2. Box Shadow: Creates a shadow effect around elements.

   /* CSS3 */
   .box {
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   }

3. Text Shadow: Adds a shadow effect to the text.

   /* CSS3 */
   .text {
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   }

4. Gradients: Allows you to create gradient backgrounds.
   /* CSS3 - Linear Gradient */
   .box {
     background: linear-gradient(to right, #ff0000, #00ff00);
   }

   /* CSS3 - Radial Gradient */
   .circle {
     background: radial-gradient(circle, #ff0000, #00ff00);
   }

5. Transitions: Enables smooth transitions between property values.

   /* CSS3 */
   .box {
     transition: background-color 0.3s ease;
   }

   .box:hover {
     background-color: #ffcc00;
   }

6. Animations: Allows you to define complex animations.

   /* CSS3 */
   @keyframes bounce {
     0%, 20%, 50%, 80%, 100% {
       transform: translateY(0);
     }
     40% {
       transform: translateY(-30px);
     }
     60% {
       transform: translateY(-15px);
     }
   }

   .box {
     animation: bounce 2s infinite;
   }

7. Flexbox: A powerful layout system for arranging items within a container.

   /* CSS3 */
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }

8. Grid Layout: A two-dimensional layout system for designing complex web page layouts.

   /* CSS3 */
   .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 10px;
   }

9. Media Queries: Allows you to apply different styles based on the user's device or screen size.

   /* CSS3 */
   @media screen and (max-width: 768px) {
     .box {
       font-size: 14px;
     }
   }

10. Transforms: Allows you to perform transformations on elements, such as scaling, rotating, and translating.

    /* CSS3 */
    .box {
      transform: rotate(45deg);
    }

Conclusion: These are just a few examples of the new features introduced in CSS3. CSS3 brought a wide range of capabilities that enable web developers to create more dynamic and visually appealing web pages without relying on complex JavaScript or images for certain effects.