特殊边框

多重边框

box-shadow 方案

box-shadowj基本用法:

  • 基本语法

    1
    box-shadow: inset offset-x offset-y blur-radius spread-radius color
    • inset

      不使用inset,默认阴影在边框外,即阴影向外扩散

      使用inset后,阴影在边框内(即使是透明边框),即阴影向内扩散,背景之上内容之下

    • offset-x offset-y

      offset-x设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边

      offset-y设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方

      如果两者都是0,那么阴影位于元素后面。这时如果设置了blur-radiusspread-radius则有模糊效果,需要考虑inset

    • blur-radius

      该值越大,模糊面积越大,阴影就越大越淡,不能为负值。默认为0,此时阴影边缘锐利。需要考虑inset

    • spread-radius

      取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。需要考虑inset

    • color

      如果没有指定,则由浏览器决定——通常是color的值,不过目前Safari取透明

  • box-shadow支持逗号分隔,可以创建任意数量的阴影,扩张半径以最里层为基准

1
2
3
4
5
6
7
8
9
10
11
12
div {
width: 200px;
margin: 50px;
padding: 10px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
/* 10px + 5px = 15px */
0 0px 5px 20px rgba(0, 0, 0, 1),
0 5px 10px 25px rgb(33, 134, 201);
text-align: center;
}

multiple-transparent-boxshadow

!需注意,此方法生成的假边框不会影响鼠标事件

outline 方案

如果只需要两层边框,可以先设置常规边框,再用outline属性产生外层的边框

1
2
3
4
5
6
7
8
9
div {
width: 200px;
margin: 50px;
padding: 10px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
text-align: center;
}

multiple-transparent-outline-1

使用outline可以通过outline-offset属性控制它和元素的边距,可以为负

使用outline生成的边框不一定会贴合border-radius的圆角

1
2
3
4
5
6
7
8
9
10
11
div {
width: 200px;
margin: 50px;
padding: 10px;
background: yellowgreen;
border: 10px solid #655;
border-radius: 8px;
outline: 1px dashed white;
outline-offset: -6px;
text-align: center;
}

multiple-transparent-outline-2

边框内圆角

通常可以使用两个嵌套的div实现

1
2
3
4
5
<div class="out">
<div class="in">
inner rounding
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.out {
width: 200px;
padding: .8em;
background: #655;
text-align: center;
}
.in {
border-radius: .8em;
padding: 1em;
background: tan;
}

inner-rounding

在只使用一个div时,可以使用outline,但是使用outline生成的边框不一定会贴合border-radius的圆角,所以可以用box-shadow填充描边和圆角之间的空隙

1
2
3
4
5
6
7
8
9
div {
margin: 50px;
width: 200px;
padding: 1em;
background: tan;
border-radius: .8em;
box-shadow: 0 0 0 .5em red;
outline: .6em solid #655;
}

inner-rounding-outline

box-shadowoutline使用相同的颜色即可得到上面的效果

半透明边框

给一个容器同时设置边框和背景时,可能会发现背景会延伸到边框所在的区域下层

1
2
3
4
div {
background: white;
border: 20px solid rgba(255, 0, 0, .5);
}

可以通过backgroud-clip来调整

1
2
3
4
5
div {
background: white;
background-clip: padding-box;
border: 20px solid rgba(255, 0, 0, .5);
}

semi-transparent-1

semi-transparent-2

灵活的背景定位

background-position允许指定背景图片距离任意边的偏移量

1
2
3
4
5
6
7
8
9
10
div {
width: 300px;
height: 100px;
margin: 50px;
padding: 10px;
color: white;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
font: 100%/1 sans-serif;
}

background

设置background-position属性后

1
2
3
div {
background-position: right 50px bottom 30px;
}

bg-position-1

若要设置偏移量和容器的内边距一致,如果采用上面的方法,则

1
2
3
4
5
div {
padding: 10px;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
}

可以观察到,如果padding的值改变,那么需要同时改变三个地方的值,可以使用background-origin

1
2
3
4
5
6
7
8
9
10
11
div {
width: 300px;
height: 100px;
margin: 50px;
padding: 10px;
color: white;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
font: 100%/1 sans-serif;
}

background-origin

如果以左上为基准,可以使用calc()函数计算

1
2
3
4
5
6
7
8
9
10
11
div {
width: 300px;
height: 100px;
margin: 50px;
padding: 10px;
color: white;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 20px);
font: 100%/1 sans-serif;
}

background-calc

条纹背景

可以通过在background属性中设置linear-gradient来生成条纹效果

基本语法:

1
linear-gradient([<angle> | to <side-or-corner>,]? <color-stop> [, <color-stop>]+)
  • <side-or-corner>

    描述渐变线的起始点位置。它包含两个关键词:第一个指出垂直位置leftright,第二个指出水平位置topbottom。关键词的先后顺序无影响,且都是可选的

    to top, to bottom, to leftto right这些值会被转换成角度0度、180度、270度和90度。

    其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。

  • <angle>

    用角度值指定渐变的方向(或角度)。角度顺时针增加。

  • <color-stop>

    由一个<color>值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的<length>

1
2
3
4
5
6
div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(60deg, red 20%, green 80%);
}

linear-gradient

水平和垂直条纹

如果某个颜色的位置值比整个列表中在它之前的颜色的位置值都要小,则该颜色的位置值会被设置为它前面所有颜色位置值的最大值

  • 水平条纹

    可以通过将第一个颜色的位置设置为一半生成等宽条纹

    1
    2
    3
    4
    5
    6
    7
    div {
    width: 300px;
    height: 100px;
    margin: 50px;
    background: linear-gradient(orange 50%, deepskyblue 50%);
    background-size: 100% 25px;
    }

    horizontal-stripes-1

    也可以设置多个颜色

    1
    2
    3
    4
    5
    6
    7
    div {
    width: 300px;
    height: 120px;
    margin: 50px;
    background: linear-gradient(orange 33.3%, deepskyblue 0, deepskyblue 66.6%, lawngreen 0);
    background-size: 100% 30px;
    }

    horizontal-stripes-2

  • 垂直条纹

    在开头添加额外的参数指定渐变的方向

    1
    2
    3
    4
    5
    6
    7
    div {
    width: 300px;
    height: 100px;
    margin: 50px;
    background: linear-gradient(90deg, orange 50%, deepskyblue 0);
    background-size: 30px 100%;
    }

    vertical-stripes

斜向条纹

若是直接将上述水平条纹旋转45度,则会形成如下效果:

1
2
3
4
5
6
7
div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(45deg, orange 50%, deepskyblue 0);
background-size: 50px 50px;
}

diagonal-stripes-1

形成这种效果的原因是这种做法相当于把每个部分旋转。事实上,斜向条纹单个部分包含的条纹是四条而不是两条

1
2
3
4
5
6
7
8
9
div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(45deg,
orange 25%, deepskyblue 0, deepskyblue 50%,
orange 0, orange 75%, deepskyblue 0);
background-size: 50px 50px;
}

diagonal-stripes-2

这种方法只能用于45度的条纹,有一个更通用的方法repeating-linear-gradient()

1
2
3
4
5
6
div {
width: 300px;
height: 100px;
margin: 50px;
background: repeating-linear-gradient(60deg, orange 0, orange 15px, deepskyblue 0, deepskyblue 30px);
}

diagonal-stripes-60deg

同色系条纹

如果想要的文理图案由同一色系的颜色组成,可以把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上

1
2
3
4
5
6
7
8
9
div {
width: 300px;
height: 100px;
margin: 50px;
background: blue;
background-image: repeating-linear-gradient(45deg,
rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 15px,
transparent 0, transparent 30px)
}

same-color-stripes

复杂的背景图案

网格

可以把水平和垂直条纹叠加起来,通过彼此透明的区域显现

1
2
3
4
5
6
7
8
9
div {
width: 300px;
height: 100px;
margin: 50px;
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;
}

grid

如果希望网格格子大小可以调整,而网格线的粗细保持固定

1
2
3
4
5
6
7
8
9
div {
width: 300px;
height: 100px;
margin: 50px;
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
}

blue-grid-1

也可以将两幅不同线宽不同颜色的网格叠加,e生成粗细不同的线条

1
2
3
4
5
6
7
8
9
10
11
12
div {
width: 300px;
height: 100px;
margin: 50px;
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
}

blue-grid-2

波点

通过径向渐变radial-gradient可以创建圆形的阵列

1
2
3
4
5
6
7
8
div {
width: 300px;
height: 120px;
margin: 50px;
background: #58a;
background-image: radial-gradient(white 30%, transparent 0);
background-size: 30px 30px;
}

polka-1

生成两层圆点阵列,并把背景定位错开

1
2
3
4
5
6
7
8
9
10
div {
width: 300px;
height: 120px;
margin: 50px;
background: #58a;
background-image: radial-gradient(white 30%, transparent 0),
radial-gradient(white 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}

polka-2

棋盘

可以使用两个等腰直角三角形拼成棋盘的一个正方形

1
2
3
4
5
6
7
8
9
10
div {
width: 300px;
height: 300px;
margin: 50px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}

checkerboard-1

在创建另一幅正方形并移动位置

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
width: 300px;
height: 300px;
margin: 50px;
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-size: 30px 30px;
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
}

另一种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
width: 300px;
height: 300px;
margin: 50px;
background: #eee;
background-image:
linear-gradient(45deg,
rgba(0, 0, 0, .25) 25%, transparent 0,
transparent 75%, rgba(0, 0, 0, .25) 0),
linear-gradient(45deg,
rgba(0, 0, 0, .25) 25%, transparent 0,
transparent 75%, rgba(0, 0, 0, .25) 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}

checkerboard-2