CSS3中,通過使用border-radius屬性,可以輕松地為一個元素的四個邊角實現圓角效果。
/* 為所有四個邊角設置相同的圓角半徑 */ border-radius: 10px; /* 分別為四個邊角設置不同的圓角半徑 */ border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-left-radius: 15px; border-bottom-right-radius: 20px; /* 簡寫方式,分別設置水平和垂直方向的圓角半徑 */ border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;
除了border-radius屬性外,CSS3中還引入了一些新的邊框背景樣式。
/* 半透明邊框 */ border: 1px solid rgba(0,0,0,0.5); /* 邊框圖像 */ border-image: url(border.png) 30 30 round; /* 邊框漸變 */ border: 1px solid; border-image: linear-gradient(to right, red, blue);
通過組合使用這些新特性,我們可以輕松地實現各種各樣的邊框背景效果。
上一篇mysql查詢a表數據