成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3 border-radius 圓角

geekzhou / 1005人閱讀

摘要：但是深入一下，還是很有講究的。問題，寬高皆為，，這個是怎么工作的換成，，甚至?xí)惺裁捶磻?yīng)答等于一個的正方形，然后用半徑為的圓來過渡邊角，如果要在大腦中有動態(tài)的效果的話，不妨如下圖來理解，更加方便。

圓角border-radius，其css如下

IE9+支持（就是ie6,ie7,ie8都不支持），默認(rèn)值是0，不繼承，可以像下面那樣設(shè)置4個角的值，也可以多帶帶設(shè)置，如 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個數(shù)值*/
 9                 border-radius:左上角值   右上角和左下角值   右下角值;
10                 
11             /*4個數(shù)值*/
12                 border-radius:左上角值   右上角   右下角值  左下角值;

?上面每個圓角都是標(biāo)準(zhǔn)的圓形來過渡的角，也可以用橢圓，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會有什么反應(yīng)？

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

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

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

?

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

答曰：視同不變！如下圖

上面我們?yōu)榱说玫揭粋€圓形，要擔(dān)心有沒有忽略padding，有沒有忽略border-width，還要根據(jù)寬度值計算，唉！有個更簡單的辦法就是如下：

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

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1395.html

相關(guān)文章

  • “蟬原則”與CSS3隨機(jī)多背景隨機(jī)圓角等效果

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

    crossoverJie 評論0 收藏0

  • CSS魔法堂：重拾Border之——不僅僅是圓角

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

    _Dreams 評論0 收藏0

  • CSS3 邊框

    摘要：邊框用，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計程序，如。在本章中，您將了解以下的邊框?qū)傩詧A角在中添加圓角棘手。 CSS3 邊框 用 CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計程序，如 Photoshop。 在本章中，您將了解以下的邊框?qū)傩裕?border-radius box-shadow border-image CSS3 圓角 在 ...

    Charles 評論0 收藏0

  • CSS魔法堂：重拾Border之——更廣闊的遐想

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

    lily_wang 評論0 收藏0

  • CSS3 border-radius 屬性

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

    geekzhou 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<