CSS 条纹背景深入
生活随笔
收集整理的這篇文章主要介紹了
CSS 条纹背景深入
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、水平漸變
實現水平條紋很簡單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style>
.h100{
height: 100px;
}
.gra{
background: linear-gradient(#fb3 20%, #58a 80%);
}
</style>
</head>
<body>
<div class="h100 gra"></div>
</body>
</html>
效果如下：這樣的效果一般就符合現實中的效果，#fb3 20% 表示上面背景顏色和顏色所占比例
linear-gradient里面的值表示背景漸變從上至下的顏色，一般的話兩種就夠了，如下：
.gra{
background: linear-gradient(#fb3 20%, #58a 30%,#ccc 50%);
}
還有一種情況：兩個顏色區域所占的百分比都是50%或者最后一個設置為0，那么就會產生一種有意思的情況，那就是漸變區域沒了，如下
實際上漸變區域是存在的，只不過是無限小。
我們還可以使用background-size實現條紋效果：
.gra{
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 20px;
}
二、垂直漸變
垂直效果的實現就有點難度了，還是那個屬性：linear-gradient ，它里面有個默認的參數 to bottom，我們把它的值改成to right，background-size值顛倒，如下：
.gra2{
background: linear-gradient(to right ,#fb3 50%, #58a 50%);
background-size: 20px 100%;
}
三、傾斜漸變
實現傾斜漸變效果則會用到一個很偏的屬性 repeating-linear-gradient 用法和linear-gradient一樣
.gra3{
background: repeating-linear-gradient(45deg,#fb3,#58a 30px);
}
效果如下：
其實linear-gradient也可以實現傾斜漸變的效果，只不過計算寬度有點復雜了，這里不做討論，得不償失
在我們實際應用中，傾斜漸變效果還是存在的，一般的話以淺色系為主，寫個簡單效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.gra3{
height: inherit;
background: repeating-linear-gradient(45deg,#F8F8FF,#F5F5F5 30px);
}
</style>
</head>
<body>
<div class="gra3"></div>
</body>
</html>
顏色有點淡，沒怎么選。用css實現漸變比用圖片實現就顯得高端多了
總結
以上是生活随笔為你收集整理的CSS 条纹背景深入的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英语的16种时态
- 下一篇： 泡酒磨砂玻璃里面有酒瓶打不开怎么处理泡酒