當(dāng)前位置：
首頁 >
CSS3 border-radius妙用
發(fā)布時間：2025/3/8
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
CSS3 border-radius妙用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
border-radius：左上 右上 右下 左下（就是順時針）
如果沒有4個值的情況下，缺的那個角的值與對角相等（如2、3、4）1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;)
等價于：
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;2、border-radius: 2em 10em;
等價于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 10em;3、border-radius: 2em 10em 5em;
等價于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 10em;4、border-radius: 2em 1em 4em / 0.5em 3em;
等價于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
重點來了，最后一種用法
如圖：
例子2：
border-radius: 2em 1em 4em / 0.5em 3em;
補齊4個角就是 border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
每一個角有2面，比如說左上角，有個top面和一個left面。
分解出來就是：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
以左上角為例子：
小例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:300px;border-radius: 2em 1em 4em / 0.5em 3em; } </style> </head> <body><div>border-radius 屬性允許您為元素添加圓角邊框！ </div></body> </html>效果：
總結(jié)：可以用css畫一些復(fù)雜的效果圖，下面鏈接大神畫的小豬佩奇，css真是無所不能。
鏈接描述
總結(jié)
以上是生活随笔為你收集整理的CSS3 border-radius妙用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tortoiseGit no git.e
- 下一篇： CSS3 选择器(转)