<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.stripes {
height: 80px;
width: 200px;
float: left;
margin: 10px;
-webkit-background-size: 5px 5px;
-moz-background-size: 5px 5px;
background-size: 5px 5px; /* 控制條紋的大小 */
border: 1px solid pink;
}
.angled-135 {
background-color: pink;
/* background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent)); */
/* background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent); */
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .9) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .9) 75%,
transparent 75%, transparent);
}
</style>
</head>
<body>
<div class="angled-135 stripes"></div>
</body>
</html>
斜槓css背景圖
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie
幾個簡單的css動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi