成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS形狀之border-radius

ckllj / 3096人閱讀

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

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

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

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

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

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

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

顯示結(jié)果為：

border-radius分別指定各個(gè)角彎曲程度

當(dāng)聲明border-radius: 10px;時(shí)，相當(dāng)于聲明border-radius: 10px 10px 10px 10px;。
四個(gè)角的值分別為左上-右上-右下-左下順時(shí)針旋轉(zhuǎn)，類似于指定盒模型的margin,border,padding方式。
現(xiàn)將四個(gè)角指定為不同彎曲程度，結(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每個(gè)角度的彎曲程度都包括水平彎曲長度和豎直彎曲長度。
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;
實(shí)例

半圓形

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111822.html

相關(guān)文章

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

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

    gotham 評(píng)論0 收藏0

  • css揭秘筆記——形狀

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

    dantezhao 評(píng)論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 評(píng)論0 收藏0

  • 不可思議的CSS之clip-path

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

    walterrwu 評(píng)論0 收藏0

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

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

    lily_wang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<