当前位置: 开发笔记 > 编程语言 > 正文

纯css3棋盘图案背景以及45度斜纹背景

作者：DaybreakCP | 来源：互联网 | 2023-05-18 21:50

css代码.stripes{height:250px;width:375px;float:left;

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代码

推荐阅读

html
所有设备的 CSS3 媒体查询

所有设备的CSS3媒体查询原文:https://www. ... [详细]

蜡笔小新 2023-10-13 10:10:33
text
前端实用的CSS3技巧有哪些

本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]

蜡笔小新 2023-09-25 13:50:50
text
在DIV内垂直居中UL - Centering Vertically an UL inside a DIV

iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]

蜡笔小新 2023-09-16 19:05:52
grid
CSS3如何实现loading预加载动画特效

小编给大家分享一下CSS3如何实现loading预加载动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章 ... [详细]

蜡笔小新 2023-09-16 12:05:33
text
html5+css3网站菜单的示例分析

这篇文章主要为大家展示了“html5+css3网站菜单的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习 ... [详细]

蜡笔小新 2023-09-16 11:05:47
text
怎么用css3实现图片的高斯模糊效果

小编给大家分享一下怎么用css3实现图片的高斯模糊效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后 ... [详细]

蜡笔小新 2023-09-24 14:56:09
text
你有什么见解

本文主要介绍关于html5,css3的知识点，对【关于雾霾网站设计】和【你有什么见解】有兴趣的朋友可以看下由【-你在暮色中】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的【】相关技术问题。你有 ... [详细]

蜡笔小新 2023-09-24 13:40:19
text
CSS3你可能不知道的冷知识

可能我们在看一些网页的源码时会发现自己从来没见过的属性或用法今天我就来总结一下CSS3的冷知识样式计算在CSS中也可以进行简单的计算通过calc函数可以实现这样还可以使我们的 ... [详细]

蜡笔小新 2023-09-24 12:20:45
web
前端每日实战 2018年10月至2019年6月项目汇总（共 20 个项目）

过往项目2018年9月份项目汇总（共26个项目）2018年8月份项目汇总（共29个项目）2018年7月份项目汇总（共29个项目）2018年6月份项目汇总（共27个项目）2018年5 ... [详细]

蜡笔小新 2023-09-18 20:39:06
web
CSS3背景颜色渐变效果

1.CSS3透明度渐变（从左到右）#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]

蜡笔小新 2023-09-17 20:26:32
text
css3基础学习笔记

1、给边框加上圆角及阴影，如下代码：<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]

蜡笔小新 2023-09-17 19:38:46
text
webstorm开发vue组件时，支持scss/less等预处理语言

vue组件支持预处理语言的关键点：<stylerelstylesheetscss>.mint-swipe{hei ... [详细]

蜡笔小新 2023-09-17 15:50:09
text
css设置尖角按钮

http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ... [详细]

蜡笔小新 2023-09-17 13:26:50
text
CSS3是怎么实现全景特效？

很有意思的全景动画：（直接上代码）html部分：<div><div>css部分：.panorama{width:300px;hei ... [详细]

蜡笔小新 2023-09-16 12:37:52
text
CSS3 filter(滤镜) 属性

CSS3filter(滤镜)属性-原文链接：CSS3filter(滤镜)属性效果预览这里仅展示黑白效果。filter:grayscale(100%);定义和使用filter 属性定 ... [详细]

蜡笔小新 2023-09-15 20:40:41

DaybreakCP

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章