CSS进阶（一）背景与边框

最新推荐文章于 2022-12-10 09:20:23 发布

Martian_小小

最新推荐文章于 2022-12-10 09:20:23 发布

阅读量408

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45950819/article/details/119784702

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS进阶（一）背景与边框

文章目录

CSS进阶（一）背景与边框

一、浏览器前缀

Firefox：-moz-
IE：-ms-
Opera：-o-
Safari、Chrome：-webkit-

二、CSS编码技巧

1、尽量减少代码重复（可复用性）

（1）当某些值相互依赖时，应该把他们的相互关系用代码表示出来

例子：一个按钮的效果

//未修改
padding:6px 16px;
background:#58a linear-gradient(#77a0bb,#58a);
color:white;
text-shadow:0 -1px 1px #335166;
font-size: 20px;
line-height:30px;

这段代码的可维护性较差，因为如果我们要改变字号，就得同时调整行高，其他效果也得随之变换大小，若修改成以下形式，则在一处就可以控制按钮的所有样式

//修改后
padding: .3em .8em;
background:#58a linear-gradient(#77a0bb,#58a);
color:white;
text-shadow:0 -.05px .05px #335166;
font-size: 125%;
line-height:1.5;

补充：em和rem的知识

em：字号与其他尺寸与父级的字号建立关联
rem：字号与其他尺寸与根级<html>的字号建立关联

（2）有时，代码易维护和代码量少不可兼得

例子：给一个元素添加10px宽的边框，当左侧不加边框

//代码量少
border-width：10px 10px 10px 0px;

//代码易维护,可读性更好
border-width：10px;
border-left-width:0;

（3）currentColor

是一个变量。currentColor本身就是很多CSS颜色的初始值。如：border-color，outline-color，text-shadow、box-shadow

例子：让所有的水平分割线<hr>自动与文本颜色保持一致

hr {
	height: .5em;
	background：currentColor;
}

（4）继承

从父元素继承，对于伪元素，会生成该伪元素的宿主元素

2、相信你的眼睛，而不是数字

3、响应式网页设计

A、媒体查询

媒体查询不能以一种连续的方式修复问题，他的工作原理基于某几个特定的接替（“断点”），媒体查询的断点不应该由具体的设备来决定，而应根据设计自身来决定。若大部分样式代码并不是以弹性的方式来编写的，那媒体查询能做的只是修补某个特定分辨率下的特定问题。

避免不必要的媒体查询的tips：

总体：尽最大努力实现弹性可伸缩布局，并在媒体查询的各个断点区间内指定相应的尺寸。

使用百分比长度取代固定长度。若做不到，也应该尝试使用与视口相关的单位（vw、vh、vmin、vmax）
当需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
不要忘记为替换元素（如：img、object、video、iframe等）设置一个max-width，值为100%。
若背景图片需要完整的铺满一个容器，不管容器的尺寸如何变化，background-size：cover这个属性都可以做到。但我们也需要记住——带宽不是无限的，因此在移动网页中通过CSS把一张大图缩小时不明智的。
当图片（或其他元素）以行列式进行过布局时，让视口的宽度来决定列的数量，**弹性盒布局或者display：inline-block**加上常规的文本折行行为，都可以实现这一点。
在使用多列文本时，指定column-width（列宽）而不是用column-count（列数），这样他就可以在较小的屏幕上自动显示为单列布局

三、边框

官方相关规范：http://w3.org/TR/css3-background

css基本UI特性：http://w3.org/TR/css3-ui

1、HSLA颜色

H（Hue）：代表色调，S（Saturation）：代表饱和度，L（Lightness）：代表亮度，A（Alpha）：代表不透明度

H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。
S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高
L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。
A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

2、半透明边框

在css2 中，默认情况下，背景会延伸到边框所在区域的下层。在css3中，为解决这个问题，引入了background-clip属性来调整，该属性初始值为 border-box：背景被 border box（边框外延框）裁切掉。若不希望背景侵入边框所在范围，属性值设为padding-box，这样浏览器就会用内边距的外沿把背景裁剪掉

例子：

border: 10px solid hsla(0,0%,100%,.5);
background:white;
background-clip: padding-box;

3、多重边框

（一）box-shadow方案

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影的位置
v-shadow：竖直阴影的位置
blur：模糊值
spread：扩展半径（让阴影面积加大或者缩小）
inset：让外部阴影改为内部阴影

解决方案：box-shadow支持逗号分割语法，通过创建任意数量的投影，实现多重边框。

background：yellowgreen;
box-shadow: 0 0 0 10px #655,
			0 0 0 15px deeppink,
			0 2px 5px 15px rgba(0,0,0,.6);//在边框之外添加阴影

注意：

box-shadow是层层叠加的，第一层投影位于最顶层，以此类推。
投影的行为根边框不完全一致，因为它不影响布局，而且不受box-sizing的影响，不过还是可以通过内外边距模拟边框需要的空间。
缺点：若是要产生虚线边框效果，box-shadow 行不通

（二）outline方案

两层边框 = 一层常规边框（border）+ outline（描边）属性来产生外层的边框

background：yellowgreen;
border:10px solid %655;
outline:5px solid deeppink; //最外层

优点：

可以通过outline-offset属性来控制它跟元素边缘之间的间距，甚至可以接收负值。对于缝边之类的效果很有用

注意：

outline**只适用于双层“边框”**的场景，因为outline并不能接受用逗号分隔的多个值。如果我们需要获得更多层，就只能用box-shadow的方案
边框不一定贴合border-radius属性产生的圆角，因此元素若是圆角的，描边可能还是直角的，这是个bug，目前无法处理

四、灵活的背景定位

css值与单位：http://w3.org/TR/css-values

问题背景：css2中只能指定距离左上角的偏移量，希望图片和容器的边角之间流出一定的空隙，或针对某个角（右下角）对背景图片做偏移很困难

1、background-position的扩展语法方案

css3中允许指定背景图片距离任意角的偏移量，只需在偏移量前面指定关键字

background-position：right 20px bottom 10px
// 与右边缘保持20px的偏移量 底边保持10px的偏移量

加上回退方案：

background：url（） no-repeat bottom right #58a;
background-position：right 20px bottom 10px;

2、background-origin 方案

默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。background-origin 可以改变默认值 padding-box，若改为 content-box，在background-position属性中使用边角关键字将会以内容区（content-box）的边缘作为基准（即此时背景图片距离边角的偏移量就跟内边距一致了）：

padding： 10px;
background：url（） no-repeat #58a bottom right /*或100% 100%*/ ;
background-origin: content-box;

3、calc()方案

background：url（） no-repeat bottom right #58a;
background-position：calc(100% - 20px) calc(100% - 10px);
//左上角偏移

五、边框内圆角

问题背景：有时需要一个容器，只在内侧有圆角，而边框或描边的四个角在外边仍然保持直角的形状，如何只用一个元素就达成效果？

解决方案

background：tan;
border-radius: .8em;
padding:1em;
box-shadow:0 0 0 .6em #655;
outline: .6em solid #655;

描边不会跟着元素的圆角走（因而显示出直角），但box-shadow会跟着圆角走，因此若把两者叠加在一起，box-shadow会刚好填补描边和容器圆角之间的空隙。

注意：

扩展半径需要比描边的宽度小
投影的扩展半径为方便可以去圆角半径的一半

六、条纹背景

css图像：http://w3.org/TR/css-images

补充：angle角度的知识

颜色渐变使由圆心往外的方向。
angles

background:linear-gradient(#fb3 20%, #58a 80%)

表示：容器顶部20%区域被填充为#fb3实色，底部20%被填充为#58a实色，渐变出现在容器中央60%的区域，即到20%的高度时开始渐变，到80%高度时停止渐变

background:linear-gradient(#fb3 20%, #58a 80%)

会出现颜色突然的变化，没有渐变

因为渐变是一种由代码生成的图像，我们可以像对待其他任何背景图像那样对待它，可以调整尺寸，背景默认情况下重复平铺。

（1）等宽条纹

background:linear-gradient(#fb3 20%, #58a 80%);
background-size:100% 30px;//每个水平条纹15px

在这里插入图片描述

（2）不等宽条纹

两不同颜色的条纹的宽度比3：7

//方法一：每次修改两个数字
background:linear-gradient(#fb3 30%, #58a 30%);
background-size:100% 30px;

//方法二（更DRY）
background:linear-gradient(#fb3 30%, #58a 0);
background-size:100% 30px;

在这里插入图片描述

重点：若某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为他前面所有色标位置的最大值

（3）多种颜色的条纹

background:linear-gradient(#fb3 33.3%, #58a 0,#58a 66.6%, yellowgreen 0);
background-size:100% 45px;

（4）斜向条纹

方法一：普通

在这里插入图片描述

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

注意：

此时条纹的宽度并不是想象中的15px，要达到15px，需要

$15 \times 2 \times \sqrt 2$

若不是45deg会出现问题

方法二：repeating-linear-gradient（）

可以改变倾斜角度

background：repeating-linear-gradient(45deg, #fb3 ,#fb3 15px,#58a 0 ,#58a 30px);

等同于：
background:linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size:42.2px 42.2px;

background：repeating-linear-gradient(60deg, #fb3 ,#fb3 15px,#58a 0 ,#58a 30px);

（5）同色系条纹

在这里插入图片描述

不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上获得浅色条纹。

background：#58a;
background-image:repeating-linear-gradient(30deg,
                        hsla(0,0%,100%,.1),
						hsla(0,0%,100%,.1) 15px,
						transparent 0,transparent 30px);

七、复杂的背景图案

CSS图案可以算是一个值得使用CSS预处理器的案例

1、网格

A、标准网格

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;

在这里插入图片描述

B、网格格子大小可调整

使用长度而不是百分比作为色标

background: #58a;
background-image:linear-gradient(white 1px, transparent 0),
				 linear-gradient(90deg,
					white 1px, transparent 0);
background-size:30px 30px;
//用1px白线画出来的30px大小的网格图案

在这里插入图片描述

C、不同线宽+不同颜色的网格

background: #58a;
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;

在这里插入图片描述

2、波点

A、普通

background:#655;
background-image:radial-gradient(tan 30%, transparent 0);
background-size:30px 30px;

在这里插入图片描述

B、两层波点

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;// 15=30/2

注意：为了达到效果，第二层背景的偏移定位值必须是贴片宽高的一半。

在这里插入图片描述

用scss预处理器处理：

@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;
}

使用时调用：

@include polka(30px,30%,#655,tan);

3、棋盘

可缩放矢量图形：http://w3.org/TR/SVG

混合模式：http://w3.org/TR/compositing-1

Bennett Feely图案库：http://bennettfeely.com/gradients

在这里插入图片描述

方法一：四层渐变

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;

方法二：两层渐变

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;

方法三：用预处理器

@mixin checkerboard($size,$base,$accent:rgba(0,0,0,.25)){
    background:$base;
    background-image:
        linear-gradient(45deg,
        				$accent 25%,transparent 0,
						transparent 75%, $accent 0),
		linear-gradient(45deg,
						$accent 25%,transparent 0,
						transparent 75%, $accent 0);
    background-position:0 0, $size $size; 
	background-size:2*$size 2*$size;
}

//调用时
@include checkerboard(15px,#eee,tan);

方法四：用SVG（更简短）

<svg xmlns="http://www.w3.org/2000/svg"
     width="100" heigth="100" fill-opacity=".25" >
    <rect x="50" width="50" height="50"/>
    <rect x="50" width="50" height="50"/>
</svg>

background:#eee url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" \
     width="100" heigth="100" fill-opacity=".25" >\
    <rect x="50" width="50" height="50"/>\
    <rect y="50" width="50" height="50"/>\
	</svg>');
background-size:30px 30px;

八、伪随机背景

例子：随机性条纹

在这里插入图片描述

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 41px, transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;

平铺尺寸为：41×61×83=207583像素

注意：

贴片的尺寸是所有background-size的最小公倍数，为了让最小公倍数最大化，尽量选择质数。

**重点：**该思想为“蝉原则”：通过质数来增加随机真实性。

适用情况：

制作背景
照片库中，为每幅图片应用细微的伪随机旋转效果，可使用多个：nth-child(a)选择符，且让a是质数。
若要生成一个动画，而且想让它看起来不是按照明显的规律旋转时，我们可以应用多个时长为质数的动画

《蝉原则对网页设计的重要性》：http://www.sitepoint.com/the-cicada-principle-and-why-it-matters-to-web-designers

蝉渐变图案：http://meerweb.com/eric/thoughts/2012/06/22/cicadients

九、连续的图像边框

背景：想把一幅图案或者图片应用为边框，而不是背景，而border-image原理是九宫格伸缩法，不能让土拍你区域随着元素的宽高和边框厚度的变化而变化。

padding:1em;
border:1em solid transparent;
background:linear-gradient(white,white),
			url(n4.jpg);
background-size:cover;
background-clip:padding-box,border-box; //规定背景的绘制区域
background-origin: border-box; // 默认为padding box 不设置为border-box的话背景图片被放置到了padding box的原点 看到的就是背景图片以平铺的方式蔓延到border-box区域的效果

//简写
padding:1em;
border:1em solid transparent;
background:linear-gradient(white,white) padding-box,
		   url(n4.jpg) border-box 0 / cover;

在这里插入图片描述

案例1：老式信封

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 / 5em 5em;
}

在这里插入图片描述

案例二：蚂蚁行军边框（标识选区）

@keyframes ants{
    to {
        background-position: 100%
    }
}
div {
    width: 500px;
    height: 300px;
    padding: 1em;
    border: 2px solid transparent;
    background: linear-gradient(white,white) padding-box,
        repeating-linear-gradient(-45deg,black 0,black 25%,white 0 ,white 50%) 0 / 1em 1em;
    animation: ants 12s linear infinite;
}

在这里插入图片描述

案例3：脚注边框（border-image）

font-size: 20px;
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,currentColor 					3em, transparent 0);
padding-top: .5em;

在这里插入图片描述

因为所有属性都用了em单位，效果会根据font-size变化，且因为用来currentColor，边框颜色也会根据color属性的变化而变化。

Martian_小小

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS进阶（一）背景与边框

CSS进阶（一）背景与边框文章目录CSS进阶（一）背景与边框一、浏览器前缀二、CSS编码技巧1、尽量减少代码重复（可复用性）（1）当某些值相互依赖时，应该把他们的相互关系用代码表示出来（2）有时，代码易维护和代码量少不可兼得（3）currentColor（4）继承2、相信你的眼睛，而不是数字3、响应式网页设计A、媒体查询三、边框1、HSLA颜色2、半透明边框3、多重边框（一）box-shadow方案（二）outline方案四、灵活的背景定位1、background-position的扩展语法方案2、bac
复制链接

扫一扫