背景&边框之魔法武器CSS3

SwordFly 发布于2019-08-29 15:34 / 947人阅读

摘要：简述在页面的构建过程中，离不开背景边框，背景和边框就是最基本的设置了为了实现一些特定的视觉效果，单一的纯色背景已经不能满足现有的效果了。在这里，我们使用纯来实现一些相对复杂的背景和边框效果，这些效果不能很好的实现向下兼容。

简述

在页面的构建过程中，离不开背景、边框，背景和边框就是最基本的设置了
UI为了实现一些特定的视觉效果，单一的纯色背景已经不能满足现有的效果了。越来越多的图片背景开始盛行。这个在一定程度上也特别方便，当然，也会经常碰到一些不能使用重复实现的背景效果，此时就需要切出来一张大幅的背景图片，图片越大就会拖慢页面的速度，用户体验的效果就会差强人意。
当下css3已经普及，虽然并不能很好的向下兼容，却可以做好回退。
在这里，我们使用纯css来实现一些相对复杂的背景和边框效果，这些效果不能很好的实现向下兼容。

背景

1.条纹背景
条纹背景，我们可以通过background的属性 linear-gradinet 来实现。通过实操来查看效果

background: linear-gradient(#fba, #58a);

背景效果：

可以看到，呈现的效果就是两种颜色的渐变，通过改变色标的位置，可以拉近两个色标，那把两个色标重合在一起，就会产生条纹的效果，如图

这样就是没有平滑渐变的条纹效果了，在应用中，我们可以使用background-size来调整条纹的尺寸，

background: linear-gradient(#fba, #58a);
background-size: 100% 20px;

这样就有了如图的效果

改变色标的位置，就可以实现不等宽的条纹效果
那如果想要超过两种颜色的条纹效果，也是很容易实现的

background: linear-gradient(#fba 33.3%,#58a 0, #58a 66.6%, #9acd32 0);
background-size: 100% 30px;

以上都是水平的条纹，那垂直的条纹甚至斜向的条纹能实现吗，当然可以的，我们只需要修改渐变的方向就可以实现了
垂直条纹

background: linear-gradient(to right, #fba 33.3%,#58a 0, #58a 66.6%, #9acd32 0);
background-size: 100% 30px;

斜向条纹
看都斜向，大家的第一想法肯定是去改变渐变的方向。如：

background: linear-gradient(45deg, #fba 50%, #58a 0);
background-size: 30px 30px;

然后，我们看到的效果是

很明显的，这个效果并不是我们想要的斜纹。原因就是我们只是把每个背景块的渐变旋转了45deg，并不是把整个重复的背景都旋转了。那如果我们想实现条纹效果，我们就要找到一个可重复的背景贴片，来实现无缝的拼接，实现如下的效果

在上图中，黑色区域就是一个可重复的背景贴片，这样就达到了预期的效果。实现的代码为：

background: linear-gradient(45deg, #fba 25%, #58a 0, #58a 50%, #fba 0, #fba 75%, #58a 0);
background-size: 42px 42px;

我们添加了更多的色标，也加大了贴片的区域范围，当然这个我们是通过勾股定理计算得到的这个近似值，但是如果每次因为改变角度，或者条纹宽度我们都要去计算一下值，这个是事倍功半的方法，反倒增加了我们的工作量。
更好的实现斜向条纹，linear-gradient有一个循环式的加强版： repeating-linear-gradient(),它的工作原理是色标可以无限循环重复的，直到填满了整个背景

对应的代码：

background: repeating-linear-gradient(60deg, #fba, #fba 15px, #58a 0, #58a 30px);

就是这样，我们可以通过很简单的一段代码，不需要复杂的计算，就实现想要的效果！

接下来，我们来延伸一下，来实现更复杂一点的背景效果，比如，网格等常见的图案

background: #fba;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

使用css来完成背景，减少了好http请求，多数情况下都还是可以实现的，如果要设计到兼容问题，那可能有些不现实了，那背景图片还是最好的解决办法，
我是在学习css揭秘这本书的时候写的笔记，
最后展示一个夜空的背景效果
如图

代码贴上

.star-bg{width: 600px; height: 600px; margin: 20px;
        background-color: #000;
        background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
                          radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
                          radial-gradient(white, rgba(255, 255 ,255, .1) 2px, transparent 40px),
                          radial-gradient(rgba(255, 255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
        background-size: 600px 600px, 350px 350px, 250px 250px, 150px 150px;
        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    }

还有更多的内容等着我去开发....加油加油！！！

混合云私有云服务武器秘密武器武器库七种武器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113409.html

CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
CSS魔法堂：重拾Border之——图片作边框

摘要：一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思，上面关于的属性，要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/...

linkFly 2019-08-30 12:59 评论0 收藏0
CSS魔法堂：重拾Border之——更广阔的遐想

摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...

lily_wang 2019-08-30 13:01 评论0 收藏0
CSS3 聊天气泡框以及 inherit、currentColor 关键字

摘要：效果如上图所示，主要用到的伪类，以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单，就一个。的关键字与之类似的还有一个新的颜色属性。实际上，这是中有史以来第一个变量，虽然功能很有限，但它真的是个变量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上图所示，主要用到CSS3的...

kel 2019-08-29 11:02 评论0 收藏0