2016-09-29 15:44
網頁設計
標籤：css
2800 2
為了感時髦，我們有時也來嘗試做些切角效果，最常見的是把元素的乙個或多個角切掉，形成乙個特殊的風格。我也嘗試做了乙個：
next
其實做這個方法是運用了css漸變的原理，我們在前面的章節中已經提到過。如果我們想做乙個單缺角，只要把需要的乙個透明色標放在切角處就可以了：
background:#448aff;
background:linear-gradient(-45deg,transparent 15px,#448aff 0);
linear-gradient，那麼就回到純色無切角上。
如果我們想把兩個角切掉呢？初步想法是再加一層：
background:#448aff;
background:linear-gradient(-45deg,transparent 15px,#448aff 0),
linear-gradient(45deg,transparent 15px,#448aff 0);
background-size讓每層漸變分別只佔據整個元素的一半的面積。
background:#448aff;
background:linear-gradient(-45deg,transparent 15px,#448aff 0) right,
linear-gradient(45deg,transparent 15px,#448aff 0) left;
background-size:50% 100%;
我們發現，出現了這樣的情況，原因是我們平鋪了兩次，通過background-repeat我們可以把重複給關掉。
background-repeat:no-repeat;成功做出了兩個切角後，我們就可以擴充套件做出4個不同方位的切角了：
其實做這個方法是運用了css漸變的原理，我們在前面的章節中已經提到過。如果我們想做乙個單缺角，只要把需要的乙個透明色標放在切角處就可以了
background:#448aff;
background:
linear-gradient(135deg,transparent 15px,#512da8 0) top left,
linear-gradient(-135deg,transparent 15px,#d32f2f 0) top right,
linear-gradient(-45deg,transparent 15px,#448aff 0) bottom right,
linear-gradient(45deg,transparent 15px,#00796b 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
其實做這個方法是運用了css漸變的原理，我們在前面的章節中已經提到過。如果我們想做乙個單缺角，只要把需要的乙個透明色標放在切角處就可以了
background:#448aff;
background:
radial-gradient(circle at top left,transparent 15px,#448aff 0) top left,
radial-gradient(circle at top right,transparent 15px,#448aff 0) top right,
radial-gradient(circle at bottom right,transparent 15px,#448aff 0) bottom right,
radial-gradient(circle at bottom left,transparent 15px,#448aff 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
mixin來改善下。
另外，書中還提到兩個其他的方案：內嵌svg與border-image方案和裁切路徑方案，考慮相容性和常用性的問題，我們這裡也就不詳細講解了。大家如果有需要的可以自行閱讀下。
四面八方的意思是什麼，怎麼用四面八方造句
四面八方這個漢語詞語是很常見的，許多文章中都有出現過。那你知道四面八方的意思是什麼嗎?該怎麼用四面八方造句呢?一起來了解下吧。四面八方的意思 四面八方，讀音為s mi n b f ng，是乙個漢語成語。指各個方面或各個地方。四面八方造句 知道了四面八方的意思是什麼，那怎麼用四面八方造句，你會嗎?來看...
微軟的四面楚歌
微軟在軟體和硬體方面的產品線之齊全，估計讓所有對手又恨又愛，正因為其不太專注，也給也其它產品更多的生存空間。下面是來自國外 繪的一張圖，名叫software wars 軟體戰爭 眾矢之的當然是microsoft。先看圖說話一下，了解的朋友可跳過該篇長舌文字，直接看後面的結論即可。另外，微軟現在已進入...
1205 楊八方的英語問題
時間限制 1 sec 記憶體限制 128 mb 提交 97 解決 27 統計楊八方相信世界上有語感這種東西，有些人對英語擁有天生的敏感。楊八方對英語的敏感體現在它她能快速找到乙個字串中的某些字母。乙個字串中的字元如果滿足以下條件 字串下標從1開始 1.si si a sj sj c sk sk m ...