本文主要是介绍css div加横线,css3: 如何给一个div添加一个条纹背景（水平，垂直，斜的），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天是我们前端小团队第二题：
Paste_Image.png
如何给一个div添加一个条纹背景(水平，垂直，斜的)？
答案：
.patterns {
width: 200px;
height: 200px;
float: left;
margin: 10px;
box-shadow: 0 1px 8px #666;
}
.pt1 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pt2 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pt3 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-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, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
暂时只想到了这一种，如果还有更好的答案请留言
这篇关于css div加横线,css3: 如何给一个div添加一个条纹背景（水平，垂直，斜的）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
