当前位置：首页 > 日记 > 正文

CSS制作网页条纹技术的详细说明

CSS制作网页条纹技术的详细说明
横向条纹
以下代码：

CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 20%，# 58a 80%）

上面的代码显示整个图片20%的上部和下部，20%是相应的纯净的颜色，只有中间的部分是渐变颜色。如果中间部分逐渐减少，当在七点上下两到0种颜色和终点的中间部分是一样的，没有梯度为双色条纹：

CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 50%，# 58a 50%）；

下一步，可以设置背景尺寸，使背景高度变小，背景重复，使条纹出现。

CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 50%，# 58a 50%）；
背景尺寸：100% 30px；

我们不能设置第二个颜色的起始位置，设置为0，然后浏览器默认为下一个颜色开始：

CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 30%，# 58a 0）；
背景尺寸：100% 30px；

这将创建一个黄色的条纹背景，30%蓝色和70%。
还可以设置多种颜色，底部设置三种颜色。

CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 33.3%，# 58a 0，# 58a 66.6%，是0）；
背景尺寸：100% 45px；
二、垂直条纹
只需要在线性渐变方法中添加一个前缀，还需要注意背景长度和宽度的设置。

CSS代码将内容复制到剪贴板。
背景：线性梯度（要放，# FB 50%，# 58a 0）；
背景：30px大小100%；
三，斜条纹
斜条纹可以通过修改背景值的大小和增加线性梯度的角度来实现。
背景：线性梯度（45度，# FB 50%，# 58a； / / 0）得到背景梯度倾斜
背景尺寸：30px 30px； / /每一固定宽度和高度的一小部分
但结果是只有一小部分削减，而不是我们需要绘制斜线四个div组和线性梯度添加颜色分解全部倾斜。

CSS代码将内容复制到剪贴板。
背景：线性梯度（45度，# FB 25%，# 58a 0，# 58a50 %，# FB 0，# FB 75%，# 58a 0）；
背景尺寸：30px 30px；

四。使用重复线性梯度
这是更有效地使用重复线性梯度法绘制反斜杠。使用这种方法时，颜色变化的设置将自动重复直到整个div的传播。示例代码如下：

CSS代码将内容复制到剪贴板。
背景：重复线性梯度（45度，# FB，# 58a 30px）；

这样，可以任意改变角度，不必调整上、中方法。
背景：重复线性梯度（60度，# FB，# fb315px，# 58a 0，# 58a 30px）；
（这种方法实际上相当于将控件的大小与渐变的控制相结合）。

五、关于色彩的设置
有时我们想要条纹背景颜色相似的颜色，但颜色的#如果手动设置是不容易的，很难找到选择什么样的颜色，可以使用以下方法：

CSS代码将内容复制到剪贴板。
背景：# 58a；
背景图像：重复线性梯度（30deg，
低合金高强度（0 %，100%，1），
低合金高强度（0 %，100%，1）15px，
透明0、透明30px）；

这种方法的原理是在背景中指定最深的颜色，而其他类似的颜色则用透明度调节。

六。一个完整的例子
这里效果图和下面的样式一起放在一起：
CSS代码将内容复制到剪贴板。
{。条纹
身高：250px；
宽度：375px；
浮点数：左；

保证金：10px；

WebKit的背景尺寸：50px 50px；
-moz背景尺寸：50px 50px；
背景尺寸：50px 50px； / *控制条的大小。

-moz框1px 1px 8px灰色阴影；
WebKit的影子：1px 1px 8px灰盒；
盒子的影子：1px 1px 8px灰色；
}

CSS代码将内容复制到剪贴板。
{。水平
背景颜色：# 0ae；
背景图像：-webkit-gradient（线性，00, 0 100%，颜色停止（。5、RGBA（255, 255, 255，2），（5）颜色停止。，透明），以（透明））；
背景图像：-moz线性梯度（RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：- o-linear-gradient（RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：线性梯度（RGBA（255, 255, 255，50%，50%，2）透明，透明）；
}

CSS代码将内容复制到剪贴板。
{。垂直
背景颜色：# F90；
背景图像：-webkit-gradient（线性，00, 100～0的颜色停止（。5、RGBA（255, 255, 255，2），（5）颜色停止。，透明），以（透明））；
背景图像：-moz线性梯度（0度，RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：- o-linear-gradient（0度，RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：线性梯度（0度，RGBA（255, 255, 255，50%，50%，2）透明，透明）；
}

CSS代码将内容复制到剪贴板。
{。野餐
背景颜色：白色；
背景图像：-webkit-gradient（线性，00, 0 100%，颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，））），
-webkit-gradient（线性，00, 100～0的颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，5））））；
背景图像：-moz线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
-moz线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：- o-linear-gradient（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
- o-linear-gradient（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
}

CSS代码将内容复制到剪贴板。
{。野餐
背景颜色：白色；
背景图像：-webkit-gradient（线性，00, 0 100%，颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，））），
-webkit-gradient（线性，00, 100～0的颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，5））））；
背景图像：-moz线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
-moz线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：- o-linear-gradient（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
- o-linear-gradient（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
}

CSS代码将内容复制到剪贴板。
{。angled-135
背景颜色：# C16；
背景图像：-webkit-gradient（线性，00, 100 % 100%，
色站（。25、RGBA（255, 255, 255，2）），（25，透明的颜色停止。），
色站（。5、透明色），停止（。5、RGBA（255, 255, 255，2）），
色站（。75、RGBA（255, 255, 255，2）），（75，透明的颜色停止。），
（透明）；
背景图像：-moz线性梯度（45度，RGBA（255, 255, 255，25%，25%，2）透明，
透明50%、RGBA（255, 255, 255。2）50%，RGBA（255, 255, 255，2）75%，
透明75%，透明）；
背景图像：- o-linear-gradient（45度，RGBA（255, 255, 255，25%，25%，2）透明，
透明50%、RGBA（255, 255, 255。2）50%，RGBA（255, 255, 255，2）75%，
透明75%，透明）；
背景图像：线性梯度（45度，RGBA（255, 255, 255，25%，25%，2）透明，
透明50%、RGBA（255, 255, 255。2）50%，RGBA（255, 255, 255，2）75%，
透明75%，透明）；
}

CSS代码将内容复制到剪贴板。
{。花纹
背景图像：-webkit-gradient（线性，00, 100～100%的颜色停止（25，555，#）颜色停止（。25、透明）、来（透明）），
-webkit-gradient（线性，0, 100 %，100% 0，色站（25，555，#）颜色停止（。25、透明）、来（透明）），
-webkit-gradient（线性，00, 100～100%的颜色停止（。75、透明色），停止（。75，# 555）），
-webkit-gradient（线性，0, 100 %，100% 0，颜色停止（。75、透明色），停止（。75，# 555））；
背景图像：-moz线性梯度（45度，# 555 25%、透明25%、透明），
-moz线性梯度（45度，# 555 25%、透明25%、透明），
-moz线性梯度（45度，#透明75%，555 75%），
-moz线性梯度（45度，透明75%，# 555 75%）；
背景图像：- o-linear-gradient（45度，# 555 25%、透明25%、透明），
- o-linear-gradient（45度，# 555 25%、透明25%、透明），
- o-linear-gradient（45度，#透明75%，555 75%），
- o-linear-gradient（45度，透明75%，# 555 75%）；
背景图像：线性梯度（45度，# 555 25%、透明25%、透明），
线性梯度（45度，# 555 25%、透明25%、透明），
线性梯度（45度，#透明75%，555 75%），
线性梯度（45度，透明75%，# 555 75%）；
}

HTML代码：
xml代码将内容复制到剪贴板。
详细说明条纹制作网页技术电脑软件  

热门内容

相关文章

Windows7启动速度的横向对比

Windows7启动速度的横向对比

横向,启动,速度,电脑软件，测试环境：CPU英特尔酷睿双核3.16ghz，内存4GB，Windows XP，Windows 7预览版的Vista，安装到同一块物理SATA硬盘。Windows 7的测试版在上个月在PDC版本的会议，和Vista SP1安装的Windows XP SP3的安装。测试的内容很简单：启动…

MySQL页面访问统计和排名

MySQL页面访问统计和排名

访问统计,页面,电脑软件,MySQL，MySQL页面访问统计和排名 统计访问页编号，按分辨率排序 选择（连接`高度`，作为`分辨率`，`宽度` *，计数（连接）（`高度`，`宽度`，*，`总`）） 从` wifi_status_page ` 集团通过concat（`高度`，*，`宽度`） 通过`总`倒序 极限0, 30 最后7…

制作幻灯片幻灯片到SWF动画中

制作幻灯片幻灯片到SWF动画中

动画,幻灯片,画中,电脑软件,SWF，1。准备转换的PPT（PPS）幻灯片文件 依次单击开始程序；powerpointtoflash进入powerpointtoflash运行主界面。在powerpointtoflash主界面，单击列标签下添加文件；，按钮，选择幻灯片文件（PPT或PPS文件），需要在浏览框出现，点…

常见的变换图形变化的CSS3的总结

常见的变换图形变化的CSS3的总结

变换,图形,常见,电脑软件，1.rotate旋转 旋转画面；单位度；度；意义 CSS代码将内容复制到剪贴板。 -moz变换：旋转（20deg）；- WebKit的变换：旋转（20deg）；- o-transform：旋转（20deg）；- MS变换：旋转（20deg）； 2.scale放大和缩小 缩放比例，如1.6放大1.6倍，如果-1.6然后小…

PPT2007允许撤销被追踪到150次。

PPT2007允许撤销被追踪到150次。

电脑软件，当使用PowerPoint 2007编辑介绍，如果操作错误，只需点击工具栏中的取消按钮，，和可恢复操作前状态。然而，默认情况下，PowerPoint 2007可以撤销最近20操作。其实，PowerPoint 2007允许用户数可以撤消150次，但你需要进行如下设置：单击Office按钮…

PHP中的特性及其功能

PHP中的特性及其功能

特性,功能,电脑软件,PHP，由于PHP 5.4.0，PHP实现了代码重用的方法，称为特征。 性状是一个丹继成语言类似于PHP代码复用机制。为了减少单继承语言的局限性，特质使开发者自由复用方法在单独的类在不同的层次。性状和类组合的语义定义作为一种方…

PS图象处理软件是如何创造虚假的伪

PS图象处理软件是如何创造虚假的伪

创造,图象,处理软件,虚假,效果，化妆品广告中的虚假伪装效应。它通常是用拉链合成的，给人难以置信的感觉。本教程是关于制作方法的。 很多朋友可能会有这样的化妆品广告印象深刻，欣赏创意和精美的创造者PS图象处理软件技能。事实上，这是广告中…

如何让背景音乐保持多张幻灯片

如何让背景音乐保持多张幻灯片

幻灯片,背景音乐,多张,电脑软件，问题：使用PPT 2007制作幻灯片，从插入；插入标签的声音只在当前幻灯片上工作，背景音乐在下一个播放时停止播放。你能让背景音乐在多张幻灯片中播放吗 答：单击插入选项卡下；；声音的图标，打开插入声音对话框中你需要的…

HTML5画布基本绘图的绘制

HTML5画布基本绘图的绘制

绘制,绘图,电脑软件，它是HTML5中的一个新标签，用于绘制图形。事实上，这个标签与其他标签相同。它的特点是，标签可以得到canvasrenderingcontext2d对象。我们可以通过Javaｓｃｒｉｐｔ脚本控制对象。 它只是一个绘图容器，除了id、类、样式等属性外，还有高度…

连接数据库实例

连接数据库实例

连接数据库,实例,电脑软件，小插曲，晚上改变数据my.ini编码UTF-8，然后数据库已无法启动，回到GBK的变化可以了解问题。 因为它是指向数据库的链接，所以没有什么可以直接解释的。 连接到mysql服务器连接到数据库服务器。 $link = mysqli_conne…

PS图象处理软件基金会：为PS图象处理

PS图象处理软件基金会：为PS图象处理

基金会,图象,处理软件,快速,电脑软件，我们通常说蒙古面具，其实有几种蒙版，我知道四种：一种是快面膜，二是面膜，三是矢量面膜，四是面膜，它们之间的内在联系，我一点也不关心他。 快速蒙版 我只是用它来建立选区，并看到一个例子：在许多皮肤磨削课程，我想…

Javaｓｃｒｉｐｔ会知道（六）删除实例

Javaｓｃｒｉｐｔ会知道（六）删除实例

删除,实例,电脑软件,Javascript，在 在确定左侧的字符串或可转换为字符串的字符是否在右侧。 var数据： 在数据中发出警报（ x）；true，x是数据的属性。 警报（在数据中）；false，数据的属性值。 var arr = {}； / /定义，直接数组对象 警报（ARR）； / /真实，会计指标…