CSS3 border-radius妙用

andycall 發布于2019-08-29 15:25 / 1594人閱讀

摘要：分解出來就是以左上角為例子小例子屬性允許您為元素添加圓角邊框效果總結可以用畫一些復雜的效果圖，下面鏈接大神畫的小豬佩奇，真是無所不能。

border-radius：左上 右上 右下 左下（就是順時針）
如果沒有4個值的情況下，缺的那個角的值與對角相等（如2、3、4）

1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;)
等價于：
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

2、border-radius: 2em 10em;
等價于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 10em;

3、border-radius: 2em 10em 5em;
等價于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 10em;

4、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;

重點來了，最后一種用法
如圖：

例子2：
border-radius: 2em 1em 4em / 0.5em 3em;
補齊4個角就是 border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
每一個角有2面，比如說左上角，有個top面和一個left面。
分解出來就是：
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 屬性允許您為元素添加圓角邊框！

效果：

總結：可以用css畫一些復雜的效果圖，下面鏈接大神畫的小豬佩奇，css真是無所不能。
鏈接描述

云服務器 GPU云服務器 border-radius css3 css3氣泡 css3動畫

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

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

【css3學習系列】之box-shadow,radial-gradient,linear-gradi

摘要：不在指定漸變區域的，以距離其最近的顏色填充。設置漸變為從右到左。這是默認值，等同于留空不寫。最后奉上一碗純拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

LdhAndroid 2019-08-30 15:45 評論0 收藏0
CSS border屬性--妙用

摘要：在下實現圓角效果由于兼容性特別差，所以要在低版本瀏覽器下實現圓周角效果特別難利用的效果可實現如下圖所示的圓效果代碼簡單如下制作三杠效果其實就是利用特性變色我們在做如下圖標時，一般情況下時會有三處變色但是利用繼承自這一特性在ie下實現圓角效果（由于border-radius兼容性特別差，所以要在ie低版本瀏覽器下實現圓周角效果特別難）利用border-style的dotted效果可實...

heartFollower 2019-08-29 12:54 評論0 收藏0
可視化效果(Visual effects)

摘要：一般地，一個塊盒的內容都被限制在該盒的邊內。這種盒并不一定會根據其祖先的屬性裁剪。默認情況下，元素不會被裁剪。在閉合路徑內的內容會顯示，而路徑外邊的都會被剪掉著作權歸作者所有。 Overflow and clipping 一般地，一個塊盒的內容都被限制在該盒的content邊內。某些情況下，一個盒可能會溢出，意味著它的部分內容或者全部內容位于該盒外部，例如：一行無法拆分，導致行盒比...

JowayYoung 2019-08-29 12:37 評論0 收藏0
CSS3 border-radius 屬性

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

geekzhou 2019-08-30 15:53 評論0 收藏0
CSS3 border-radius 圓角

摘要：但是深入一下，還是很有講究的。問題，寬高皆為，，這個是怎么工作的換成，，甚至會有什么反應答等于一個的正方形，然后用半徑為的圓來過渡邊角，如果要在大腦中有動態的效果的話，不妨如下圖來理解，更加方便。圓角border-radius，其css如下 IE9+支持（就是ie6,ie7,ie8都不支持），默認值是0，不繼承，可以像下面那樣設置4個角的值，也可以單獨設置，如 border-top-left...

geekzhou 2019-04-23 11:57 評論0 收藏0