第二章 背景与边框
2018-05-15 本文已影响0人
惊蛰梧桐
1.半透明边框
易遗漏点：默认情况下，背景会延伸到边框所在的区域下层。
关键属性：background-clip——设置元素的背景（背景图片或颜色）是否延伸到边框下面；值：border-box/padding-box/content-box/inherit
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;
2.多重边框
易遗漏点：
box-shadow支持逗号分隔语法，可以创建任意数量的投影
box-shadow方案
语法
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
outline方案
优点：1、边框样式灵活，可以实现虚线等其他样式；2、可以通过
outline-offset属性控制它跟元素边缘之间的间距，可以接收负值，因此可以实现多种效果，比如可以实现在元素内的缝边效果。
语法
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;
/* Global values */
outline: inherit;
outline: initial;
outline: unset;
3.灵活的背景定位
应用场景：针对容器某个角对背景图片做偏移定位，或希望图片和容器的边角之间留出一定的空隙
background-position——指定背景图片距离任意角的偏移量。
background: url(example-img.svg) norepeat #58a;
background-position: right 20px bottom 10px;
background-origin方案
规定了指定背景图片
background-image属性的原点位置的背景相对区域。
语法
where
<box> = border-box | padding-box | content-box
background-origin: border-box
background-origin: padding-box(默认)
background-origin: content-box
background-origin: inherit
calc()方案
CSS函数
calc()可以用在任何一个需要<length><frequency><angle><time><number><integer>的地方，可以通过它来计算决定一个CSS属性的值
background: url(example-img.svg) no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px)
/* 以左上角偏移的思路来考虑，即实现100%-20px的水平偏移量，100%-10px的垂直偏移量 */
4.边框内圆角
应用场景：需要一个只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状的容器。
实现方法一：通过两个元素实现
略
实现方法二：通过box-shadow+outline实现
注意点：border-radius是x，那么box-shadow的最小扩张半径就是(sqrt(2)-1)*x
5.条纹背景
垂直渐变
background: linear-gradient(#fb3, #58a)
颜色渐变
background: linear-gradient(#fb3 40%, #58a 80%) //设置渐变区间
设置渐变区间
background: linear-gradient(#fb3 50%, #58a 50%); //条纹背景
background-size: 100% 50px;
条纹背景
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0); //三条纹背景
background-size: 100% 50px;
三条纹背景
background: linear-gradient(to right, #FB3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 50px 100%;
垂直条纹
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 50px 50px;
地板砖条纹
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
斜45度条纹
更好的斜向条纹
关键属性：
repeating-linear-gradient()和repeating-redial-gradient()
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
斜60度条纹
background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
灵活的同色系条纹
6.复杂的背景图案
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;
方格纹背景
background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0), linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
image.png
