纯css3棋盘图案背景以及45度斜纹背景
2024-10-19 14:28:38
css代码
.stripes {
height: 250px;
width: 375px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* 控制条纹的大小 */
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}
.checkered {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
.angled {
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
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, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}
html代码
<div class="checkered stripes"></div>
<div class="angled stripes"></div>
最新文章
- 推荐一些国内的Jquery CDN免费服务
- JavaScript 基础第四天
- 一个label里有个链接，点这个特别颜色的一些字，会执行一些操作
- mysql “group by ”与"order by"的研究－－分类中最新的内容
- C和C++的头文件总结
- Python-描述符
- Java基础知识强化之集合框架笔记29：使用LinkedList实现栈数据结构的集合代码（面试题）
- asp.net mvc 强类型视图中传入List 数据到控制器
- 【2017-05-22】WebForm内置对象：Application和ViewState、Repeater的Command用法
- CUDA C Best Practices Guide 在线教程学习笔记 Part 1
- poj - 1185 炮兵阵地 状压DP 解题报告
- Linux 64位下一键安装scipy等科学计算环境
- objective-c中所谓的僵尸对象
- Python3 调试技巧 —— 死循环
- SSIS中xml的输入输出
- Mysql 子查询
- 论文阅读笔记六：FCN：Fully Convolutional Networks for Semantic Segmentation(CVPR2015)
- python 全栈开发，Day115(urlencode,批量操作,快速搜索,保留原搜索条件,自定义分页,拆分代码)
- navicat 激活流程
- mybatics之trim