在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ CSS3如何實現(xiàn)4個切角

CSS3如何實現(xiàn)4個切角

只有一個標簽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>corner</title>
    <style type="text/css">
        body{
            padding: 100px;
        }
        .corner{
            width: 300px;
            height: 300px;
            background:
                    linear-gradient(135deg, transparent 15px, deeppink 0)
                    top left,
                    linear-gradient(-135deg, transparent 15px, deeppink 0)
                    top right,
                    linear-gradient(-45deg, transparent 15px, deeppink 0)
                    bottom right,
                    linear-gradient(45deg, transparent 15px, deeppink 0)
                    bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="corner"></div>
</body>
</html>

問題 ：

1.background:linear-gradient(135deg, transparent 15px, deeppink 0)top left 中為什么要寫top left，135deg不就是右上角的意思嗎？

2. 與background-size和background-repeat有什么關(guān)系？

回答
編輯回答
鹿惑

謝邀。。既然如此，就說的詳細點吧。。
首先回答問題2：
在這個例子里，要知道 background-size:50% 50%; 意思是你設(shè)置的背景長和寬各為元素的一半。也就是為如果你的背景是張圖片，那么這張圖片占你元素的1/4，然后會生成4個這樣的圖片，重復(fù)填滿你的元素。設(shè)置background-repeat: no-repeat; 這樣使得你的圖片不重復(fù)，元素背景只會有一張圖，元素剩下的3/4填充空白。
background-size和background-repeat并沒有什么關(guān)系，應(yīng)要說關(guān)系，也就都是對背景的操作罷了。它倆不過是對背景以不同的方式調(diào)整罷了。

問題1：
top left和135deg沒關(guān)系，135deg表示切角的方向，top left表示背景的位置。
你的background寫了四個linear-gradient，這是css3的background應(yīng)用多層背景的特性，然后又因為你的background-size和background-repeat, 元素就生成了'4'個不一樣的背景，每一個占據(jù)1/4的元素。每個元素都在元素的左上方，你就導(dǎo)致你的'4'個背景重疊了。這個時候，你的每一個背景里，都寫了'top left'這類的東西，這東西就是移動你背景去相應(yīng)的地方。
background:top left其實是background-position:top left的縮寫。

2018年4月4日 15:08