超实用CSS技巧总结（1）——背景和边框

编程语言 2023-04-10 08:45:20 阅读次数: 0

文章内容来自CSS神书《CSS揭秘》。

献上膝盖就好

1、半透明边框

错误的写法：

div {
    
    
	background-color: white;
	border: 10px solid hsla(0, 0%, 100%, .5);
}

错误的原因很简单，因为默认情况下，背景是会包含边框的，背景的白色已经把半透明的边框覆盖了，所有看不见，因此使用background-clip属性进行裁剪。

正确写法：

/**
 * Translucent borders
 */

body {
    
    
	background-color: #000;
}

div {
    
    
	border: 10px solid hsla(0,0%,100%,.5);
	background: white;
	background-clip: padding-box;  /*从padding开始往外面裁剪背景*/
	
	/* styling */
	max-width: 20em;
	padding: 2em;
	margin: 2em auto 0;
	font: 100%/1.5 sans-serif;
}

效果

在这里插入图片描述

2、多重边框

思路：使用box-shadow来创建多个看起来和边框没区别的阴影。box-shadow的第四个参数表示阴影面积的加大或者减小，两个为0的偏移和模糊为0的阴影实际上就是一道“边框”。

code:

/**
 * Multiple borders
 */

div {
    
    
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
} /*甚至可以控制边框的大小*/

效果图

在这里插入图片描述

如果使用两层边框，还有更好的解决方案：

使用outline描边的方法，给border描边。

code

/**
 * Multiple borders
 */

div:nth-child(1) {
    
    
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	border: 10px solid #655;
    outline: 5px solid deeppink;
}

div:nth-child(2) {
    
    
    width: 100px;
    height: 60px;
    margin: 25px;
    background: #ccc;
    border: 2px solid #655;
    outline: 1px dashed #000;
    outline-offset: -10px;  /*指定描边的偏移，非常灵活，这里形成了一个缝边的效果*/
}

效果

在这里插入图片描述

3、灵活的背景图片定位

目标：把背景图片定位到距离底部10px，右边20px的位置。

code1:

background-position: right 20px bottom 10px;

code2:

background-position: calc(100% - 20px) calc(100% - 10px);
/*操作符左右必须要有空格*/

code3:

padding-right: 20px;
padding-bottom: 10px;
background-origin: content-box;  
/*修改右下角的位置，使得图片对齐的是content-box的右下角而不是默认的padding-box的右下角*/

4、边框内圆角

code

<div class="father">
	<div>Xiaoshulin</div>
</div>

/**
 * Inner rounding
 */

.father {
    
    
	width: 200px;
	background: #655;
	padding: .8em;
}

.father div {
    
    
	background: tan;
	border-radius: .8em;
	padding: 1em;
	text-align: center;
}

效果

在这里插入图片描述

5、条纹背景

最简单的条纹

简单的条纹背景可以使用渐变（linear-gradient）来生成（本质是背景图片），指定颜色的百分数位置来确定界限，然后使用background-size来调整渐变图像的平铺方式，因为默认是采用重复平铺，所以最后会生成条纹。

其中，使用 to-left, to-top, to-right, to-bottom参数可以指定渐变的方向，也就是条纹的方向。

div:nth-child(1) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(#fb3, #58a);
}

div:nth-child(2) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(#fb3 50%, #58a 50%);
    background-size: 100% 30px;
}

div:nth-child(3) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(to right, #fb3 30%, #58a 50%);
    background-size: 30px 100%;
}

div:nth-child(4) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(red 0, red 33.3%, green 33.3%, green 66.6%, yellow 66.6%, yellow 100%);
    background-size: 100% 30px;
}

效果图
在这里插入图片描述

斜向条纹的生成：加上角度就可以了。

比较简单的一些例子（45度）

div:nth-child(1) {
    
    
    width: 200px;
    height: 200px;
    margin: 10px;
    background: linear-gradient(45deg, #fb3 50%, #58a 0);
    background-size: 40px 40px;
}

div:nth-child(2) {
    
    
    width: 200px;
    height: 200px;
    margin: 10px;
    background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size: 30px 30px;
}

效果

在这里插入图片描述

更好的方法（适用于更多的情况）：

repeating-linear-gradient()，它可以一直无限重复循环渐变知道铺满整个背景，简直就是为了条纹图案而生。

div:nth-child(1) {
    
    
    width: 300px;
    height: 200px;
    margin: 10px;
    background: repeating-linear-gradient(60deg, red 0, red 15px, blue 0, blue 30px, green 0, green 45px);
}

效果

在这里插入图片描述

同色系条纹：
/*同色系的条纹建议使用半透明的白色叠加而不是指定具体的颜色，符合DRY原则。*/
div:nth-child(1) {
    
    
    width: 300px;
    height: 200px;
    margin: 10px;
    background-color: #58a;
    background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
}

效果

在这里插入图片描述

汇总：

code:


/**
 * Multiple borders
 */

div {
    
    
    display: inline-block;
}

div:nth-child(1) {
    
    
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	border: 10px solid #655;
    outline: 5px solid deeppink;
}

div:nth-child(2) {
    
    
    width: 100px;
    height: 60px;
    margin: 25px;
    background: #ccc;
    border: 2px solid #655;
    outline: 1px dashed #000;
    outline-offset: -10px;  /*指定描边的偏移，非常灵活，这里形成了一个缝边的效果*/
}


div:nth-child(3) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(#fb3, #58a);
}

div:nth-child(4) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(#fb3 50%, #58a 50%);
    background-size: 100% 30px;
}

div:nth-child(5) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(to right, #fb3 30%, #58a 50%);
    background-size: 30px 100%;
}

div:nth-child(6) {
    
    
    width: 200px;
    height: 100px;
    margin: 10px;
    background: linear-gradient(red 0, red 33.3%, green 33.3%, green 66.6%, yellow 66.6%, yellow 100%);
    background-size: 100% 30px;
}

div:nth-child(7) {
    
    
    width: 200px;
    height: 200px;
    margin: 10px;
    background: linear-gradient(45deg, #fb3 50%, #58a 0);
    background-size: 40px 40px;
}

div:nth-child(8) {
    
    
    width: 200px;
    height: 200px;
    margin: 10px;
    background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size: 30px 30px;
}

div:nth-child(9) {
    
    
    width: 300px;
    height: 200px;
    margin: 10px;
    background: repeating-linear-gradient(60deg, red 0, red 15px, blue 0, blue 30px, green 0, green 45px);
}

/*同色系的条纹建议使用半透明的白色叠加而不是指定具体的颜色，符合DRY原则。*/
div:nth-child(10) {
    
    
    width: 300px;
    height: 200px;
    margin: 10px;
    background-color: #58a;
    background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
}

总的效果图片：

在这里插入图片描述

6、复杂的背景图案

使用CSS渐变来创建任何种类的几何图片都是有可能的。

网格

使用单一的CSS渐变通常很难是图案复杂，但是使用多个渐变图案组合起来，就可以产生很多的可能。

code:

div {
    
    
  width: 300px;
  height: 300px;
  border: 3px solid #000;
  display: inline-block;
  margin: 5px;
}

div:nth-child(1) {
    
    
  background: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

div:nth-child(2) {
    
    
  background: white;
  background-image: linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

div:nth-child(3) {
    
    
  background: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), 
                    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;  /*一行10个*/
}

效果

在这里插入图片描述

指定固定大小粗细的网格线（使用像素而不是百分数）

div:nth-child(4) {
    
    
  /*固定粗细的网格线*/
  background: skyblue;
  background-image: linear-gradient(white 2px, transparent 0),
                    linear-gradient(90deg, white 2px, transparent 0);
  background-size: 30px 30px;
}

效果

在这里插入图片描述

波点

使用径向渐变工具可以创建美丽的波点图案。

 /*径向渐变创建图案*/

div:nth-child(5) {
    
    
  background: #655;
  background-image: radial-gradient(15px, tan 100%, transparent 0);
  background-size: 30px 30px;
}

div:nth-child(6) {
    
    
  /*这里的背景偏移必须是贴片大小尺寸的一半*/
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0), 
                    radial-gradient(tan 30%, transparent 0);
 /*第一个保持不变，第二个偏移15px*/                
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

效果

在这里插入图片描述

为了代码的可维护性，书中推荐使用SCSS预处理size大小。

创建可复用形式的style:

@mixin polka($siz3, $dot, $base, $accent) {
    
    
  background: $base;
  background-image: radial-gradient($accent $dot, transparent 0),
    radial-gradient($accent $dot, transparent 0);
  background-size: $size $size;
  background-position: 0 0, $size/2 $size/2;
}

使用：

div {
    
    
  @include polka(30px, 30%, #655, tan);
}
棋盘

制造棋盘的关键在于使用三角形的拼凑和位移，只使用一种线性渐变是无法完成任务的。

首先需要得到三角形：

div {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-size: 30px 30px;
}

在这里插入图片描述

然后在对两张图片进行偏移操作：

在这里插入图片描述

div:nth-child(8) {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

得到正方形：

在这里插入图片描述
然后复制一份，进行偏移就可以了。

div {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0),
                    linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;
}

/*另外一种比较简单的写法，把上面两个渐变合并一下*/

div {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%),
                    linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

/*使用角向渐变*/
div {
    
    
  background: repeating-conic-gradient(#bbb 0,#bbb 25%, #eee 25%, #eee 50%);
  background-size: 30px 30px;
}

最后的效果：

在这里插入图片描述

汇总
div {
    
    
  width: 300px;
  height: 300px;
  border: 3px solid #000;
  display: inline-block;
  margin: 5px;
}

div:nth-child(1) {
    
    
  background: white;
  background-image: linear-gradient(
    90deg,
    rgba(200, 0, 0, 0.5) 50%,
    transparent 0
  );
  background-size: 30px 30px;
}

div:nth-child(2) {
    
    
  background: white;
  background-image: linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
  background-size: 30px 30px;
}

div:nth-child(3) {
    
    
  background: white;
  background-image: linear-gradient(
      90deg,
      rgba(200, 0, 0, 0.5) 50%,
      transparent 0
    ),
    linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
  background-size: 30px 30px; /*一行10个*/
}

div:nth-child(4) {
    
    
  /*固定粗细的网格线*/
  background: skyblue;
  background-image: linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0);
  background-size: 30px 30px;
}

/*径向渐变创建图案*/

div:nth-child(5) {
    
    
  background: #655;
  background-image: radial-gradient(15px, tan 100%, transparent 0);
  background-size: 30px 30px;
}

div:nth-child(6) {
    
    
  /*这里的背景偏移必须是贴片大小尺寸的一半*/
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0),
                    radial-gradient(tan 30%, transparent 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

div:nth-child(7) {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-size: 30px 30px;
}

div:nth-child(8) {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

div:nth-child(9) {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0),
                    linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;
}


div:nth-child(10) {
    
    
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%),
                    linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

div:nth-child(11) {
    
    
  /*角向渐变*/
  background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
}

div:nth-child(12) {
    
    
  background: repeating-conic-gradient(#bbb 0,#bbb 25%, #eee 25%, #eee 50%);
  background-size: 30px 30px;
}

总的效果图

在这里插入图片描述

更多牛逼的图案参考，其中有使用了强大的位图技术：CSS3 Patterns Gallery， 还有就是使用混合模式的图案库Bennett Feely的图案库。

7、伪随机背景

当你注意到一个有辨识度的特征时，在以固定的规律重复时，那么它试图营造的自然随机性就会瞬间崩塌。 —— Alex Walker，《禅原则对于网页设计的重要性》

因此，对于图片的平铺方式应该尽量维持良好的自然随机性，而不是非常明显的单调的重复平铺，就好像下面的花海，虽然花朵一直在重复，但是没有两朵花是一模一样的。

在这里插入图片描述

伪随机条纹背景

先看一下单调的明显的条纹

div {
    
    
  background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
  background-size: 80px 100%;
}

在这里插入图片描述

眼睛明显对于颜色更加敏感，所以我们想要的只是颜色的重复而并非颜色出现的规律，这里有一个很妙的想法：使用叠加的效果，控制条纹的大小来产生随机的效果。

那么问题就是条纹大小的选择怎么选？

禅原则：质数增加随机性。

div {
    
    
/*都是用质数作为条纹的大小和背景图片的大小*/
  background: linear-gradient(90deg, #fb3 11px, transparent 0),
              linear-gradient(90deg, #ab4 23px, transparent 0),
              linear-gradient(90deg, #655 41px, transparent 0);
  background-size: 41px 100%, 61px 100%, 83px 100%;
}

效果

在这里插入图片描述

数学上的解释为，重复出现的位置刚好就是条纹大小的最小公倍数，那么为了尽可能增加最小公倍数，最快的方法就是使用互质的数。

这个原则不仅仅对于背景适用，对于很多需要伪随机的场景下，都可以考虑这一点。

随机动画：质数时长的连续动画；

给每一张图片做细微的伪旋转效果：质数间隔的图片做一个微旋转。

8、连续的图像边框

可能对于大多数人实现的方法是border-image属性，但是border-image是基于九宫格的放缩来实现的，具体的实现可以去搜，最后的结果就是边框始终是图片的边缘，所以border-image适用于那些体现边缘内容不变的情况。我们想要的有时候并不是一张图片的一部分，而是随着内容的大小变化，边框的内容也会相应发生改变。然而这个是border-image做不到的。

其实使用两个元素的方法可以实现：

<div class="test">
  <div>
  Hello World!
  </div>
</div>

.test {
    
    
  display: flex;
  background: linear-gradient(red, blue);
  background-size: cover;
  padding: 1em;
}

.test > div {
    
    
  width: 100%;
  height: 400px;
  font-family: Courier New;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 400px;
  background: white;
  padding: 1em;
}

效果

在这里插入图片描述

那么如果使用一个元素如何完成？
思路其实不难，主要是使用“多重背景”和“背景裁剪”的搭配来完成。

下面来做一个信封的边框：

用一个白色背景掩盖padding-box的部分，用一张图片掩盖border-box的部分，从而图片的部分只会在border体现出来。

div {
    
    
  width: 1000px;
  height: 500px;
  padding: 1em;
  font: italic bold 30px Lora;
  text-align: center;
  line-height: 500px;
  border: 1em solid transparent;
  background: linear-gradient(white, white),
              repeating-linear-gradient(-45deg, red 0, red 12.5%, 
                transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%);
  background-clip: padding-box, border-box;
  background-size: 500px 100%;
  background-origin: border-box;
}

效果：

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_51156601/article/details/127134488
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022