border-radius應用示例
阿新 • • 發佈：2018-12-19
<html> <head> <style> div{ display: inline-block; height: 50px; width: 160px; border: 1px solid red; margin-top: 20px; text-align: center; vertical-align: center; line-height: 50px; } div:nth-child(1){ border-radius: 25px; width: 100px; } div:nth-child(2){ border-radius: 50%; } div:nth-child(3){ border-radius: 50% 50% 0 0 / 100% 100% 0 0; } div:nth-child(4){ border-radius: 100% 0 0 100% / 50% 0 0 50%; } div:nth-child(5){ border-radius: 0 100% 100% 0 / 0 50% 50% 0 ; } div:nth-child(6){ border-radius: 0 0 50% 50% / 0 0 100% 100% ; } div:nth-child(7){ border-radius: 100% 0 0 0 ; } div:nth-child(8){ border-radius: 30% 15px / 100% 15px; } div:nth-child(9){ border-radius: 10px/50%; } div:nth-child(10){ width: 50px; height: 50px; border-radius: 10px 100% 20px 5px; } div:nth-child(11){ width: 50px; height: 50px; border-radius: 15px 15px 5px 5px/ 100% 100% 5px 5px; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </body> </html>