6-复杂的背景图案
桌布图案
/** * Checkerboard */ 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-position: 0 0, 15px 15px; background-size: 30px 30px; min-height: 100%; /** * Polka dot */ background: #655; background-image: radial-gradient(tan 20%, transparent 0), radial-gradient(tan 20%, transparent 0); background-size: 30px 30px; background-position: 0 0, 15px 15px;
棋盘
/** * Checkerboard */ 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-position: 0 0, 15px 15px; background-size: 30px 30px; min-height: 100%; /** * Checkerboard with SVG */ background: #eee url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\ <rect x="50" width="50" height="50" />\ <rect y="50" width="50" height="50" />\ </svg>'); background-size: 30px 30px;
角向渐变
/** * Conic gradients test * PASS if green gradient, FAIL if red. */ background: red; background: conic-gradient(limegreen, green, limegreen); min-height: 100%;
7-伪随机背景
介绍：重复的平铺图案虽然美观，但是不太自然，下面介绍增加随机性背景的方法。
/** * Pseudorandom stripes */ background: hsl(20, 40%, 90%); background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 23px, transparent 0); background-size: 83px 100%, 61px 100%, 41px 100%;
8-连续的图像边框
介绍：通常这种效果是借助 双 dom 来实现，一个作为背景图，一个作为内容；我们的改进方案是基于一个元素来实现的。
/** * Basic border-image demo */ div { border: 40px solid transparent; border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \ <circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \ <circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \ <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \ <circle cx="25" cy="15" r="5" fill=" %23655"%2F><circle cx="5" cy="25" r="5" fill="%23fb3"%2F> \ <circle cx="15" cy="25" r="5" fill=" %23655"%2F><circle cx="25" cy="25" r="5" fill="%2358a"%2F><%2Fsvg>'); padding: 1em; max-width: 20em; font: 130%/1.6 Baskerville, Palatino, serif; } div:nth-child(2) { margin-top: 1em; border-image-repeat: round; }
利用上面的条纹背景
/** * Vintage envelope themed border */ div { padding: 1em; border: 1em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em; max-width: 20em; font: 100%/1.6 Baskerville, Palatino, serif; }
9-自适应的椭圆
介绍：border-radius 其实可以单独指定水平和垂直半径，用斜杠（/）分隔这两个值即可。利用这个特性可以创建椭圆圆角。
椭圆
/** * Flexible ellipse */ div { width: 20em; height: 10em; background: #fb3; border-radius: 50%; }
半椭圆
/** * Flexible half ellipse */ div { display: inline-block; width: 16em; height: 10em; margin: 1em; background: #fb3; border-radius: 50% / 100% 100% 0 0; } div:nth-of-type(2) { border-radius: 50% / 0 0 100% 100%; } div:nth-of-type(3) { border-radius: 100% 0 0 100% / 50%; } div:nth-of-type(4) { border-radius: 0 100% 100% 0 / 50%; }
四分之一椭圆
/** * Flexible quarter ellipse */ div { display: inline-block; width: 16em; height: 10em; margin: 1em; background: #fb3; border-radius: 100% 0 0 0; } div:nth-of-type(2) { border-radius: 0 100% 0 0; } div:nth-of-type(3) { border-radius: 0 0 100% 0; } div:nth-of-type(4) { border-radius: 0 0 0 100%; }
10-平行四边形
背景知识： 基本的 css 变形 transform: skewx()
潜套元素方案
可以解决文字变形的问题
/** * Parallelograms — with extra HTML element */ <a href="#yolo" class="button"><div>Click me</div></a> <button class="button"><div>Click me</div></button> .button { transform: skewX(45deg); } .button > div { transform: skewX(-45deg); } .button { display: inline-block; padding: .5em 1em; border: 0; margin: .5em; background: #58a; color: white; text-transform: uppercase; text-decoration: none; font: bold 200%/1 sans-serif; }
伪元素方案
/** * Parallelograms — with pseudoelements */ <a href="#yolo" class="button"><div>Click me</div></a> <button class="button"><div>Click me</div></button> .button { position: relative; display: inline-block; padding: .5em 1em; border: 0; margin: .5em; background: transparent; color: white; text-transform: uppercase; text-decoration: none; font: bold 200%/1 sans-serif; } .button::before { content: ''; /* To generate the box */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: skew(45deg); }
