CSS艺术 背景与边框

CSS
字数统计: 2.3k   |   阅读时长≈ 10 分钟

半透明边框

背景颜色会延伸到边框的下面，如果给元素一个虚线边框就能看到

使用 background-clip 让元素的背景被内边框裁掉

1
2
3
4
5
width: 100px;
height: 100px;
border: 20px dashed hsla(0, 0%, 100%, 0.5);
background: darkgoldenrod;
background-clip: padding-box;

多重边框

box-shadow 模拟

原理就是让扩张半径增大，偏移量以及模糊值都为 0，需要注意，阴影并不会占据空间大小，需要处理元素的位置。

1
2
3
4
5
width: 100px;
height: 100px;
background: darkgoldenrod;
box-shadow: 0 0 0 10px #0000ff, 0 0 0 20px #00ff00, 0 0 0 30px #ff0000;
margin: 30px 0 0 30px;

outline

使用 outline + border 可以实现两侧边框，比 box-shadow 更灵活。

注意，outline 的边框可能和圆角不贴和。一些老的浏览器版本中可能存在

1
2
3
4
5
6
width: 100px;
height: 100px;
background: darkgoldenrod;
border: 10px solid #0000ff;
outline: 10px solid #00ff00;
border-radius: 10px;

使用负的 outline-offset 实现缝线的效果

1
2
3
4
5
6
width: 100px;
height: 100px;
background: darkgoldenrod;
outline: 1px dashed #fff;
border-radius: 10px;
outline-offset: -10px;

背景图片

background 简写属性如下

1
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background-position 允许指定每个方向的偏移量,在简写属性中添 right bottom,可以防止background-position不被支持的时候位置误差过大 

1
2
3
4
width: 100px;
height: 100px;
background: darkgoldenrod url(./cover1.jpg) right bottom / 20px 20px no-repeat;
background-position: right 20px bottom 20px;

如果你想让背景图片出现在右下角,但是又要空出与 padding 相等的距离,可以使用 background-origin 可以修改出现背景出现的区域

1
2
3
4
5
width: 100px;
height: 100px;
padding:20px;
background: darkgoldenrod url(./cover1.jpg) right bottom / 20px 20px no-repeat;
background-origin: content-box;

也可使用 calc() 函数

1
2
3
4
5
width: 100px;
height: 100px;
box-sizing: border-box;
background: darkgoldenrod url(./cover1.jpg) right bottom / 20px 20px no-repeat;
background-position: calc(100% - 20px) calc(100% - 20px);

条纹背景

首先我们想实现的是一个实色过度的背景,也就是没有渐变的效果

当下个颜色的起点在,上一个颜色的终点时,这时候没有空间让渐变产生就会是一个实色的背景

1
2
background:linear-gradient(#58a 50%,#fba 50%);
background-size:100% 30px;

还有一个简写的方法,如果某个颜色的位置比整个列表中他前面颜色的位置都要小,这个颜色的起始位置会被设置为前面颜色中的最大位置

1
2
background:linear-gradient(#58a 50%,#fba 0);
background-size:100% 30px;

如果想要垂直方向的条纹,需要给定一个角度,并修改背景大小

1
2
background:linear-gradient(90deg,#58a 50%,#fba 50%);
background-size:30px 100% ;

另一种常用的技巧是,把条纹的主色设置为背景色,再用另一种半透明的颜色覆盖,更容易修改

45度斜向条纹

如果理所当然的把角度改为其他角度,就以为能得到条纹背景,那就错了

因为旋转的只是一个背景单元(贴片)中的背景,而不是整个背景,他们拼在一起的时候会产生锯齿

所以需要在一个单元(贴片)中完整的画出条纹,在使用这个单元(贴片)去铺满背景

现在需要加几个锚点,在单元中画出相间的四条背景线,把这些单元拼接在一起的时候就会形成45度的斜向条纹

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

其他角度的斜向条纹

但是其他角度的时候,会法相还是无法实现,比如 60度

所以css还提供了一个加强版的线性渐变,可以将你画出的部分当作单元并重复铺满整个背景

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

在实现条纹背景的时候,通常两个颜色属于一个色系,可以将主色设置为背景,副色作为条纹背景盖在上面,而且好处是不支持的时候可以显示主色的背景

1
2
3
4
5
6
7
8
background: repeating-linear-gradient(
    60deg,
    hsla(0, 0%, 100%, 0.1),
    hsla(0, 0%, 100%, 0.1) 15px,
    transparent 0,
    transparent 30px
  ),
  #58a;

网格背景

利用半透明的叠加,可以创建对比更明显的网格

1
2
3
4
background: white;
background: 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;

也可以让渐变的起始宽度为1px.创建更细的网格线

1
2
3
4
background: white;
background: linear-gradient(90deg, #58a 1px, transparent 0),
  linear-gradient(#58a 1px, transparent 0);
background-size: 30px 30px;

也可以加重一些边框,形成层次更深的网格

1
2
3
4
5
6
7
background:  
  linear-gradient(white 2px,transparent 0),
  linear-gradient(90deg, white 2px,transparent 0),
  linear-gradient(hsla(0,0%,100%,0.3) 1px,transparent 0),
  linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px,transparent 0)
   #58a;
  background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

更复杂的背景案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
background: radial-gradient(
      circle at 0% 50%,
      rgba(96, 16, 48, 0) 9px,
      #613 10px,
      rgba(96, 16, 48, 0) 11px
    )
    0px 10px,
  radial-gradient(
    at 100% 100%,
    rgba(96, 16, 48, 0) 9px,
    #613 10px,
    rgba(96, 16, 48, 0) 11px
  ),
  #8a3;
background-size: 20px 20px;

波点背景

想实现这样的效果,我们从图形中切出一个小方块.用这个方块铺满整个背景

1
2
3
background:  
  radial-gradient(tan 30%,transparent 0) #58a;
  background-size:30px 30px;

但是现在看着还不是很饱满,我们可以生成两层图案,通过背景定位放到稍微错开的位置

1
2
3
4
5
6
background:  
  radial-gradient(tan 30%,transparent 0),
  radial-gradient(tan 30%,transparent 0),
  #58a;
  background-size:30px 30px;
  background-position:0 0 ,15px 15px;

使用一个 mixin 让代码更容易维护

1
2
3
4
5
6
7
8
9
/*          单元格大小, 点的半径, 回退颜色, 点的颜色*/
@mixin polka($size,   $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;
}

棋盘

期盼的效果看起来简单但实际上有一点麻烦,因为没有一种渐变能实现一个正方形中的1/4个小正方形的效果.

所以需要换一种思路,先实现正方形的两个对角,再用这两个对角,和其他正方形中的对角拼成一个小正方形

1
2
3
4
5
6
7
8
background: linear-gradient(
  45deg,
  #ccc 25%,
  transparent 0,
  transparent 75%,
  #ccc 0
);
background-size: 30px 30px;

但是在一个渐变里面连续实现两个三角型,没有办法控制他们的位置进行拼接,所以需要分成两个渐变,并控制第二个渐变的背景位置

1
2
3
4
5
6
background: linear-gradient(45deg, #ccc 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, #ccc 25%, transparent 0),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-position: 0 0, -15px 15px, 0 -15px, -15px 0;
background-size: 30px 30px;

部分浏览器已经支持角向渐变,可以直接画出1/4个正方形

1
2
background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);
background-size: 30px 30px;

伪随机背景

如果背景是不透明的,而且是连续的,那就会每隔background-size指定的像素后就会重复一次.

所以可以考虑将背景大小设为不同的数值,并且渐变不会铺满整个背景,让他们相互覆盖,形成随机

1
2
3
4
background: linear-gradient(90deg, #fb3, 10px, transparent 0),
  linear-gradient(90deg, #ab4, 20px, transparent 0),
  linear-gradient(90deg, #655, 30px, transparent 0);
background-size: 40px 100%, 60px 100%, 80px 100%;

但是使用整数还是容易被察觉,每隔240px也就是各个背景大小的最小公倍数,所以这里可以把背景大小换成质数

1
2
3
4
background: linear-gradient(90deg, #fb3, 10px, transparent 0),
  linear-gradient(90deg, #ab4, 20px, transparent 0),
  linear-gradient(90deg, #655, 30px, transparent 0);
background-size: 41px 100%, 61px 100%, 71px 100%;

图像边框

如何实现把一张照片中间部分当作内容区域,剩下区域当作背景的效果.

最简单的想法是,通过两个元素下面的元素用上面的元素遮挡.这个方法是可行的.但是如果只用一个元素呢?

如果你想到的 background-image 那可能会有一点问题, background-image 会将背景图片按九宫格划分,在四个边上的背景会被拉伸或者重复.

其实还可以用多重背景来做, 用 background-clip 控制背景的显示区域,下面用一个夸张的样式看下现在的效果

1
2
3
4
5
6
7
width: 320px;
height: 180px;
border: 100px solid transparent;
background: linear-gradient(white, transparent), url(./cover1.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: padding-box;

在边框上已经有指定的背景,但是背景没有从边框的左上角开始,这是因为 background-origin 默认是 padding-box 会从内边框的左上角开始,所以边框上的图片是重复平铺之后扩展出来的图片,下面稍微修改一下

1
2
3
4
5
6
7
width: 320px;
height: 180px;
border: 20px solid transparent;
background: linear-gradient(#fff, #fff), url(./cover1.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

下面是简化后的属性

1
2
3
4
5
6
width: 320px;
height: 180px;
border: 20px solid transparent;
background: 
  linear-gradient(#fff, #fff) padding-box,
  url(./cover1.jpg) border-box 0 / cover;

信封效果边框

可以利用背景的渐变并应用在边框上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
width: 320px;
height: 180px;
border: 10px solid transparent;
background: linear-gradient(#fff, #fff) padding-box,
  repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 12.5%,
      red 0,
      red 25%,
      transparent 0,
      transparent 37.5%,
      #58a 0,
      #58a 50%,
      transparent 0
    )  0 / 5em 5em;

动态虚线边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
width: 320px;
height: 180px;
border: 1px solid transparent;
background:
  linear-gradient(#fff, #fff) padding-box,
  repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 25%,
    #000 0,
    #000 50%
  )  0 / 0.5em 0.5em;
  animation: ani 10s linear infinite;
}

@keyframes ani {
  0% {
      background-position:0
  }
  100% {
    background-position:100%
  }
}

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2015-2025 SunZhiqi

此时无声胜有声！

支付宝
微信