面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记
生活随笔
收集整理的這篇文章主要介紹了
面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- border-radius 屬性
- border-radius的其他寫法
- 代碼實例
- 效果圖
border-radius 屬性
CSS3的圓角邊框實際上是在矩形的四個角分別做內切圓，然后通過設置內切圓的半徑來控制圓角的弧度。
CSS3的圓角邊框使用border-radius 屬性來實現，基本語法如下所示：
其中：length用于設置對象的圓角半徑長度，不可為負值。如果“/”前后的值都存在，那么“/”前面的值設置其水平半徑，“/”后面值設置其垂直半徑。如果沒有“/”，則表示水平和垂直半徑相等。
另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設置。如果省略 bottom-left，則與 top-right 相同，如果省略 bottom-right，則與 top-left 相同，如果省略 top-right，則與 top-left 相同。
border-radius的其他寫法
border-radius是一種縮寫的方式，其實border-radius和border屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法：
border-top-left-radius: <length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius:<length> <length> //右下角 border-bottom-left-radius:<length> <length> //左下角 // 他們的參數都是先y軸然后x軸代碼實例
<!DOCTYPE html> <html lang="en"> <head><!--過渡 transition--><meta charset="UTF-8"><title>CSS3 圓角邊框</title><style>body{ /*定義了背景顏色*/padding: 0;background-color: #F7F7F7;}div{margin: 20px;float: left;}/*餅環*/.border-radius{width: 40px;height: 40px;/*邊框*/border: 70px solid #93baff;/*直徑與盒子邊相等時，為圓*/border-radius: 90px;}/*四邊不同色*/.border-radius1{width: 0px;height: 0px;border : 90px solid;/*邊框顏色可以定義很多種*/border-color: #ff898e #93baff #c89386 #ffb151;}</style> </head> <body> <div class="border-radius"></div> <div class="border-radius1"></div> </body> </html>效果圖
總結
以上是生活随笔為你收集整理的面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【详细解读】CSS渐变用法——Web前端
- 下一篇： 操作系统 先来先服务算法（FCFS）、最