Set a radial gradient as the background image, with radial-gradient() CSS function. You can try to run the following code to implement linear-gradient() function in CSSExampleLive Demo                    #demo {             height: 200px;             background: radial-gradient(green, orange, maroon);          }                     Setting background as radial gradient.          

To implement animation on the border-bottom property with CSS, you can try to run the following code:ExampleLive Demo                    div {             width: 500px;             height: 400px;             background: yellow;             border: 5px dashed yellow;             background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                background-color: maroon;                background-position: bottom right;                background-size: 90px;                border-bottom: 25px solid orange;             }          }                     Performing Animation for bottom border          

The nav-down property is used to move down when you have pressed on down arrow button in keypad. You can try to run the following code to implement the CSS nav-down propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4    

Use the font-size-adjust property to preserve the readability when font fallback occurs. You can try to run the following code to implement the font-size-adjust property:ExampleLive Demo                    #demo {             font-size-adjust: 0.90;          }                     Heading Two       With font-size-adjust property:                This is demo text.             Without font-size-adjust property:       This is demo text.    

To implement animation on the border-top-color property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 2px solid black;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-spacing: 50px;                border-top-color: red;             }          }                     Performing Animation for border top color                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

Use the grid-auto-flow property to include auto-placed items in the grid.ExampleYou can try to run the following code to implement the grid-auto-flow property with CSS −Live Demo                    .container {             display: grid;             grid-auto-columns: 50px;             grid-auto-flow: column;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Use the CSS user-select property to set whether the text of the element can be selected or not with CSS:ExampleLive Demo                    div {             user-select: none;          }                     This is demo heading       This is demo text. You won't be able to select it.    

To implement animation on font property with CSS, you can try to run the following code:ExampleLive Demo                    p {             border: 2px solid black;             width: 400px;             height: 100px;             animation: myanim 5s infinite;          }          @keyframes myanim {             70% {                font: 35px arial, sans-serif;             }          }                     This is demo text    

To implement animation on flex-shrink property with CSS, you can try to run the following codeExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 150px;             font-size: 30px;             width: 100px;             margin: 5px;          }          div {             animation: myanim 4s infinite;          }          @-webkit-keyframes myanim {             70% {                flex-shrink: 1;             }          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          Q9          

To implement animation on filter property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 600px;             height: 300px;             background-image: url('https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg');             border: 2px solid blue;             animation: myanim 3s infinite;             position: absolute;             column-rule: 10px inset orange;             column-count: 4;          }          @keyframes myanim {             20% {                filter:contrast(400%);             }          }                     Performing Animation on filter property