国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS形狀之border-radius

ckllj / 3024人閱讀

摘要：現(xiàn)將四個角指定為不同彎曲程度，結(jié)果如下其中可以寫成以下形式此為新增的屬性。相當(dāng)于前面是水平彎曲長度，后面為豎直彎曲長度。其中是指彎曲的長度為矩形長度的等同于實例半圓形沿縱軸劈開的半橢圓四分之一橢圓技巧二形狀

開發(fā)者常用border-radius來將矩形更改為圓角矩形，大部分人寫上例如border-radius:5px;就可以滿足對網(wǎng)頁布局形狀的要求，但其實這個CSS屬性可以這么玩。

border-radius的三種聲明方式 
border-radius: 10px;
border-radius: 2em;
border-radius: 50%;
border-radius指定不同彎曲程度下的顯示結(jié)果

現(xiàn)設(shè)置四個width: 200px;height: 100px;的正方形div，彎曲程度分別設(shè)置如下：

border-radius: 10%;
border-radius: 25%;
border-radius: 40%;
border-radius: 50%;

當(dāng)設(shè)置四個width: 200px;height: 100px;的正方形div，彎曲程度分別設(shè)置如下：

border-radius: 10%;
border-radius: 25%;
border-radius: 40%;
border-radius: 50%;

顯示結(jié)果為：

border-radius分別指定各個角彎曲程度

當(dāng)聲明border-radius: 10px;時，相當(dāng)于聲明border-radius: 10px 10px 10px 10px;。
四個角的值分別為左上-右上-右下-左下順時針旋轉(zhuǎn)，類似于指定盒模型的margin,border,padding方式。
現(xiàn)將四個角指定為不同彎曲程度，結(jié)果如下：

border-radius: 10% 25% 40% 50%;

其中border-radius: 10% 25% 40% 50%;可以寫成以下形式:

border-top-left-radius: 10%;
border-top-right-radius: 25%;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 50%;

此為css3新增的屬性。

為border-radius分別指定水平、豎直彎曲程度

如上圖所示，border-radius每個角度的彎曲程度都包括水平彎曲長度和豎直彎曲長度。
border-radius：50%；相當(dāng)于border-radius: 50%/50%;前面是水平彎曲長度，后面為豎直彎曲長度。其中50%是指彎曲的長度為矩形長度的50%

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;
實例

半圓形

border-radius: 50% / 100% 100% 0 0;

沿縱軸劈開的半橢圓

border-radius: 100% 0 0 100% / 50%;

四分之一橢圓

border-radius: 100% 0 0 0;

CSS技巧（二）：形狀

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111822.html

相關(guān)文章

  • 從一滴水說起，談?wù)?em>CSS形狀的生成思路

    摘要：水是生命之源生產(chǎn)之要生態(tài)之基。興水利除水害事關(guān)人類生存社會進(jìn)步歷來是治國安邦的大事。附個生成器，雖然不能生成本文的水滴。 水是生命之源、生產(chǎn)之要、生態(tài)之基。興水利、除水害,事關(guān)人類生存、社會進(jìn)步,歷來是治國安邦的大事。巴拉巴拉~不扯淡了， 來看看下面這張圖，額，為了扣題，就管她叫水滴吧（雖然是倒的），從這開始，讓我們用css來生成她~ showImg(https://segmentfa...

    gotham 評論0 收藏0

  • css揭秘筆記——形狀

    摘要：把改成，就變成了這樣實現(xiàn)邊框內(nèi)圓角多重邊框還有下實現(xiàn)多重背景為某一層背景單獨設(shè)置類似這樣的屬性等等。裁切路徑方案這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r，會裁切掉文本。 自適應(yīng)的橢圓（border-radius的用法） 單獨指定水平和垂直半徑 長寬固定的元素，可以通過指定寬高的一半，變?yōu)闄E圓形，格式為兩個值用/分開。 width: 100px; height: 80px; border-radi...

    dantezhao 評論0 收藏0

  • 【css3學(xué)習(xí)系列】之box-shadow,radial-gradient,linear-gradi

    摘要：不在指定漸變區(qū)域的，以距離其最近的顏色填充。設(shè)置漸變?yōu)閺挠业阶蟆＿@是默認(rèn)值，等同于留空不寫。最后奉上一碗純拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

    LdhAndroid 評論0 收藏0

  • 不可思議的CSS之clip-path

    摘要：一個用來生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網(wǎng)站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學(xué)可以暫時等等。透明區(qū)域表示被裁剪的區(qū)域基本圖形定義一個矩形。語法說明可選，表示填充規(guī)則用來確定該多邊形的內(nèi)部。 本文首發(fā)于 我的博客 曾經(jīng)和某位朋友在聊天中討論過這樣一個話題：綜合90%的網(wǎng)站的布局以及頁面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）...

    walterrwu 評論0 收藏0

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

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

    lily_wang 評論0 收藏0

發(fā)表評論

0條評論

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