CSS3 border-radius 圓角

geekzhou 發布于2019-04-23 11:57 / 979人閱讀

摘要：但是深入一下，還是很有講究的。問題，寬高皆為，，這個是怎么工作的換成，，甚至會有什么反應答等于一個的正方形，然后用半徑為的圓來過渡邊角，如果要在大腦中有動態的效果的話，不妨如下圖來理解，更加方便。

圓角border-radius，其css如下

IE9+支持（就是ie6,ie7,ie8都不支持），默認值是0，不繼承，可以像下面那樣設置4個角的值，也可以多帶帶設置，如 border-top-left-radius:2em;

 1         /*border-radius:后面跟1個值、2個值、3個值、4個值時的情況*/
 2             /*1個值：四個角一樣圓*/
 3                 border-radius:四個圓角一樣的值;
 4 
 5             /*2個值，前:左上右下，后:右上左下*/
 6                 border-radius:左上角和右下角值  右上角和左下角值;
 7                 
 8             /*3個數值*/
 9                 border-radius:左上角值   右上角和左下角值   右下角值;
10                 
11             /*4個數值*/
12                 border-radius:左上角值   右上角   右下角值  左下角值;

?上面每個圓角都是標準的圓形來過渡的角，也可以用橢圓，x軸和y軸的值不相等，前面x，后面y，如下，/ 前面都是各個角的水平方向值，/ 后面是各個角的垂直方向的值

1         div {
2             width: 300px;
3             height: 300px;
4             background: #FF9900;
5             /* /前面是圓角橫向上的各個角的值   /后面是圓角豎向上的各個角的值  */
6             /* 利用橫向和縱向不同，畫個芒果  */
7             border-radius: 280px 30px 300px 80px / 270px 20px 300px 20px;
8         }

效果圖如下：

-------------

這沒什么難的，記憶一下即可。但是深入一下，還是很有講究的。

問題1，div寬高皆為100px，border-radius:30px，這個30px是怎么工作的？換成50px，70px，甚至200px會有什么反應？

答：等于一個100px的正方形，然后用半徑為30px的圓來過渡邊角，如果要在大腦中有動態的效果的話，不妨如下圖來理解，更加方便。

當圓角是30px的時候，效果如上，如果圓角為50px呢？各占用50px，則達到中間點了，變成一個圓了！如果div有邊框10px呢，這border-radius為60px才是圓，如下圖

如果border-radius為70px呢？明顯，2個70是大于100的，這個角按70來畫，另外一個角就不夠用了

問題2，既然邊框變圓了，形狀改變了，面積改變了，那么對div里面的內容有什么影響呢？

答曰：視同不變！如下圖

上面我們為了得到一個圓形，要擔心有沒有忽略padding，有沒有忽略border-width，還要根據寬度值計算，唉！有個更簡單的辦法就是如下：

/*管它padding,border,width，有了這個值，正方形變成圓，長方形變成橢圓！！！是的，不用像素，用百分比 */
border-radius:50%;

云服務器 GPU云服務器內凹圓角，css3 border-radius css3 css3氣泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1395.html

“蟬原則”與CSS3隨機多背景隨機圓角等效果

摘要：那蟬原則對我們網頁設計有什么啟示呢那就是可以以最小成本實現更自然的隨機效果。本文就演示兩個借助蟬原則和特性實現隨機效果的例子。一、什么是蟬原則？蟬原則，英文稱作cicada principle，是一種讓事物的重復出現符合自然隨機性的規則，為什么這么說呢？蟬原則源自于北美，中國似乎并未有這樣的說法，這背后是有有故事的：北美和東亞蟬的種群是不一樣的，在東亞蟬的幼蟲生活在土中3年5年或7...

crossoverJie 2019-04-23 13:44 評論0 收藏0
CSS魔法堂：重拾Border之——不僅僅是圓角

摘要：擼代碼實現首頁檢驗單查詢成品通用標準審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right...

_Dreams 2019-08-30 13:01 評論0 收藏0
CSS3 邊框

摘要：邊框用，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如。在本章中，您將了解以下的邊框屬性圓角在中添加圓角棘手。 CSS3 邊框用 CSS3，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如 Photoshop。在本章中，您將了解以下的邊框屬性： border-radius box-shadow border-image CSS3 圓角在 ...

Charles 2019-08-29 13:25 評論0 收藏0
CSS魔法堂：重拾Border之——更廣闊的遐想

摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...

lily_wang 2019-08-30 13:01 評論0 收藏0
CSS3 border-radius 屬性

摘要：今天面試的時候，面試官問了一個屬性參數的問題。使用屬性，你可以給任何元素制作圓角。設置不同參數，也可以制作其他形狀的角屬性有四個值，分別對應圖中位置圓角的半徑。此時使用號隔離，號前表示水平半徑，號后表示垂直半徑，缺省值時表示含義同上。今天面試的時候，面試官問了一個border-radius屬性參數的問題。當時記得不清楚，回去后便研究學習了一下。使用 CSS3 border-radiu...

geekzhou 2019-08-30 15:53 評論0 收藏0