二十一、CSS3圓角半徑/多背景/背景尺寸

weixin_34249678發表於2017-12-08
CSSS3

一、圓角

border-radius:40px;

水平半徑|垂直半徑


2391256-f6fae832e3123bf8.png
圖1
2391256-c14774a870490b38.png
圖2
border-radius:40px 20px   50px  60px;
左上面圓角水平半徑和垂直半徑都是40px
右上面圓角水平半徑和垂直半徑都是20px
右下面圓角水平半徑和垂直半徑都是50px
左下面圓角水平半徑和垂直半徑都是60px

也可以下面這樣

border-top-left-radius:40px 40px;
左上面圓角水平半徑和垂直半徑都是40px
border-top-right-radius:20px 20px;
右上面圓角水平半徑和垂直半徑都是20px
border-bottom-left-radius:50px 50px;
右下面圓角水平半徑和垂直半徑都是50px
border-bottom-right-radius:60px 60px;
左下面圓角水平半徑和垂直半徑都是60px

水平半徑一垂直半徑不一樣如下：

border-top-left-radius:20px 40px;
左上面圓角水平半徑是20px,垂直半徑都是40px
border-top-right-radius:20px 35px;
右上面圓角水平半徑是20px，垂直半徑都是35px
border-bottom-left-radius:50px 30px;
右下面圓角水平半徑是50px，垂直半徑都是30px
border-bottom-right-radius:60px 40px;
左下面圓角水平半徑是60px,垂直半徑都是40px

案例程式碼

<!DOCTYPE html>
<html>
<head>
    <title>圓角</title>
    <meta charset="utf-8">
</head>

<style type="text/css">
    div{
        width: 150px;
        height: 150px;
        margin:0px auto;
        background: red;
        border:1px solid red;
        border-top-left-radius:20px 40px;
        /*左上面圓角水平半徑是20px,垂直半徑都是40px*/
        border-top-right-radius:20px 35px;
        /*右上面圓角水平半徑是20px，垂直半徑都是35px*/
        border-bottom-left-radius:50px 30px;
        /*右下面圓角水平半徑是50px，垂直半徑都是30px*/
        border-bottom-right-radius:60px 40px;
        /*左下面圓角水平半徑是60px,垂直半徑都是40px*/

    }
</style>
<body>

<div></div>

</body>
</html>

效果

2391256-78029fdfbddca5cb.png
圖2

二、背景

多背景

 background:url(...) 120px 0px on-repeat,url(...) 120px 0px on-repeat;
有多個背景值用“,”號分開
background-size: 20% 20%,30% 30%;
設定多個背景的的大小,會按照background的順序來.如果只有一個值，會把所有的背景都設定為同樣大小

三、尺寸

background-size:
值：
1、具體的數值
2、百分比 : 盒子的佔比
3、cover ：填滿整個盒子
4、contain ：儘量顯示全部圖片

一個值是等比縮放， 二個值如果比例不對會變形

四、RGBA說明：

五、背景裁切

background-clip:
border-box; 從邊框開始顯示背景
padding-box; 從padding開始顯示背景
content-box; 從內容開始顯示背景
text；從文字區劃顯示背景 需要rgba的配合

六、瀏覽器核心字首

先了解:w3c組織
-webkit-transition:1s; chrome safari ...
-moz-transition:1s; 火狐
-ms-transition:1s; ie 360(極速webkit/安全版ms)
-o-transition:1s; opera
transititioan:1s; 等w3c標準樣式

七、漸變

線形漸變
background:linear-gradient(90deg,red,yellow,#aabcc);
90deg:90度
“,”號後面可以無限寫
background:linear-gradient(90deg top,red 120px,yellow 200px,#aabcc 100px);
徑向漸變

相關文章