css3圓角介紹與應用技巧
- PHP中文网原創
- 2016-11-30 23:59:391512瀏覽
*以下技巧皆源自於Lea Verou所著《CSS Secrets》
自適應橢圓與圓角構造
在css上構造圓形只需要將border-radius屬性值設為邊長的一半即可設為邊長的一半。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>border-radiustitle>
<style>
.borderRadius{
display: inline-block;
background: #fb3;
min-width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100px;
/* 边长的一半 */box-sizing: border-box;
padding:0 5px;
}<style>
<head>
<body>
<p class="borderRadius">
<p class="innerTxt">p>p>body>html>
顯示效果如下：
以上佈局當我們在innerTxt中添加過多的內容時，會得到如下的效果：
的話，那麼border-radius中就不應該是固定的值，當我們將border-radius設定為50%時，顯示效果如下：
這樣就變成了一個自適應的橢圓了。 這裡我們全面介紹一下border-radius的屬性，border-radius是一個簡寫屬性，它的展開式是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、
border-bottom-left-radius。
border-radius可以單獨指定水平和垂直半徑，只要用一個斜杠（ / ）分隔這兩個值即可
（圓形圓角水平和垂直半徑相等，可以合併）。
結合這這些特性來看的話，border-radius:50%;的詳細展開應該是border-radius:50% 50% 50% 50%/50% 50% 50% 50%。
b10% % ;
border-radius:
100% 0 0 0 / 100% 0 0 0;
特性加上一些想像，就可以構造出可愛的糖果按鈕效果了。
.borderRadius{display: inline-block;background: rgba(255,160,220,.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 200px;height: 100px;line-height: 200px;
border-radius: 50% 10% / 100% 10%;
}
.borderRadius{display: inline-block;background: rgba(157, 255, 127, 0.8);
box-shadow: hsl(0, 0%, 60%) 0 3px 3px;min-width: 160px;height: 100px;
line-height: 200px;border-radius: 20% 20% 12% 12%/ 80% 80% 12% 12%;
}
以上就是css3圓角介紹與應用技巧的內容，更多相關內容請關注PHP中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn