當前位置:首頁 » 網頁前端 » 圓角web
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

圓角web

發布時間: 2023-06-13 21:40:17

❶ 如何把WebView設置成圓角的

您好,我來為您解答:
給webView外面加一個圓角邊框,然後設置其邊框顏色和webView背景顏色相同。呵呵...方法有點笨!
如果我的回答沒能幫助您,請繼續追問。

❷ web中如何實現圓角矩形是不是有個叫border-radious

利用 CSS3 的 border-radius 屬性能夠令網頁元素表現圓角,雖然目前絕大多數的瀏覽器都已經支持 border-radius 屬性,而老式的IE瀏覽器們如 IE6、IE7 或 IE8 是不支持 border-radious 屬性的。
但可以用一個js插件「CurvyCorners」解決。

通常,要使用網頁中的某些元素呈現圓角,我可以使用 CSS3 的 border-radious 屬性,在需要顯示圓角的CSS元素中添加如下的屬性值即可,如:
#wrapper{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 8px;
border: 1pxsolid#333;
}
Firefox, Safari 和 Chrome 等瀏覽器默認支持這些屬性,但是,對於 IE9 以下的舊版 IE 來說,它們就會無視(不支持)以上的 CSS 屬性,那怎麼辦呢?方法是有的,而且也相當簡單。

首先下載一個小小的 js文件 Curvy Corners 到桌面上,解壓縮,將其中的 curvycorners.js 文件放到網站目錄.

在頁面中使用curvycorners.js 實現圓角功能:
在head節點中加入如下代碼:
<script type="text/JavaScript" src="../curvycorners.js"></script> /*引入js*/

<script type="text/JavaScript">
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}

curvyCorners(settings, "#myBox"); /*myBox 為需要處理圓角的容器id*/
}

</script>

❸ web前端開發,怎麼處理css3中邊框倒角屬性

CSS3 使用border-radius屬性設置圓角效果
該屬性可以通過設置圖片或塊級元素四個角的圓角半徑像素數來實現該效果。W3C規定該屬性的可能取值為:
none,默認值,表示元素沒有圓角效果
length,由浮點數字和單位標識組成的長度值
%,由百分比設置的圓角值
該屬性可以分別設置元素的四個圓角效果,採用下列格式來實現。
格式:border-radius: 左上角 右上角 右下角 左下角;
通常,四個方向的角半徑均採用length取值來實現,該取值必須為浮點數字和單位標識共同組成。同時規定,該取值不得取負數。
例1:利用整數來實現圓角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述實例設置了一個div塊級元素,其寬度為200px,高度為150px。為了能夠看到其圓角效果,增加了顏色為#ff5857的背景顏色,並且添加了1px大小的邊框,其邊框為實線,邊框顏色為#aaaaaa。最後設置其圓角效果,左上角和右下角均為10px,右上角和左下角均為5px。
例2:查看下列CSS代碼。
(1)border-radius: 10px 5px 15px 20px;
(2)border-radius: 10px 5px 15px;
(3)border-radius: 10px 5px;
(4)border-radius: 10px;
上述四組代碼中,只有組(1)提供了完全符合格式的四個數據,其他三組均只提供了小於四個的數據。這種情況下,數據依然按照「左上角 右上角 右下角 左下角」的順序進行排列,沒有涉及到的角方向按照其對角的圓角數據進行設置。
因此,組(2)的數據表示:左上角為10px,右上角為5px,右下角為15像素,左下角為右上角的像素設置,即5px。請同學們根據這樣的方法,理解一下組(3)的圓角含義。
組(4)就設置了一個數據,這表示四個方向的角半徑均為10px。
二、獨立設置元素的四個圓角效果:
若只想設置一個塊級元素右上角的圓角效果,該如何實現呢?這里W3C為border-radius屬性派生出了表示四個方向的獨立圓角效果的子屬性。
border-top-left-radius, 定義左上角的圓角效果
border-top-right-radius, 定義右上角的圓角效果
border-bottom-right-radius, 定義右下角的圓角效果
border-bottom-left-radius, 定義左下角的圓角效果
上述四個子屬性的取值規則和border-radius屬性的取值規則是完全相同的。
例3:設置p標記的圓角效果,其中左下角沒有圓角效果,其他三個方向角的圓角效果均為25px。
方法1:利用border-radius屬性統一設置。
p{border-radius: 25px 25px 25px 0;}
方法2:利用border-radius屬性的派生子屬性設置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3:利用border-radius屬性設置所有角方向均為25px,再利用border-radius屬性的派生子屬性設置左下角沒有圓角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}

❹ web 我在DW中用border-radius中設置0px為什麼沒有用

起作用了啊!border-radius:0050px50px;的意思是左上角和右上角保持直角不變,右下角和左下角是半徑為50像素的圓角

補充:如果想要的效果是半圓,應該這樣:

.h1{width:100px;

height:50px;

background:#F3F;

border-radius:0 0 100px 100px;}