首页 前端知识 css揭秘-学习小结

css揭秘-学习小结

2024-08-14 22:08:01 前端知识 前端哥 620 615 我要收藏

0 引言-编码技巧

尽量用相对单位,比如字体大小和行高,如果是绝对值每次两个都要改,如果是相对值则只要改一个。

0.1 代码易维护和代码量不可兼得

为一个元素添加宽10px的边框,左侧不带边框,有两种方案

border-width: 10px 10px 10px 0;

border-width: 10px;

border-left-width: 0;

一个代码少但改的多,一个代码多但改的少

0.2 继承

可以使用inherit关键字,使元素继承父元素的属性:

input, select, button {font:inherit}

0.3 相对单位的使用

比如百分比,em,或视口相关单位:vw, vh, vmin, vmax

0.4 合理使用简写

不少属性可以简写到一个属性里,此处推荐合理使用简写。因为如果属性展开写,可能会遗漏,也可能属性太多改的麻烦,相互影响等,总之,有好有坏

当多个属性使用相同值时,由于相同属性具有扩散作用,可以简写成一个

1 背景与边框

1.1 半透明边框

hsla颜色:通过四个值描述颜色:hsla(0, 0%, 50%, 0.5):第一个元素表示色相,决定是什么颜色,第二个元素是饱和度,0-100%,越高越饱满,越低越灰色,第三个元素是亮度,第四个元素是透明度,值范围0-1

问题 即 如何实现半透明色

一个解决方案如下

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

但边框的半透明透过来的是background的白色,结果背景的白色遮挡了背景图片,css3的background-clip可解决此问题,该属性会将透明区域的背景色用边框外沿剪掉,背景色就能透过来了

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

1.2 多重边框

box-shadow基本用法:box-shadow属性用来给元素添加阴影效果,参数如下:box-shadow: h-shadow v-shadow blur spread color inset; 

h-shadow表示在水平方向投影大小;v-shadow表示在垂直方向投影大小;blur表示阴影模糊程度;spread表示阴影扩张程度,color表示阴影颜色;inset默认是外阴影,如果设置,可设为内阴影

background: yellowgreen;
box-shadow: 0 0 0 10px #655

这个效果是#655颜色宽10px的实线边框,背景色是黄绿

因为box-shadow属性支持逗号分割,可以再弄一个边框:

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px #328

需注意的是,逗号分割的边框,第一个在最顶层,往后就是底层的

还需注意,box-shadow的视觉效果和border这种边框效果可相似,但box-shadow的阴影没有边框宽度属性,边框也不会出发鼠标等移动事件

box-shadow只能模拟实线边框,无法模拟虚线边框

outline属性可以在border外再描一层边,注意outline和box-shadow重叠时,outline盖在box-shadow上面

1.3 灵活的背景定位

background-position

如果想针对某个地方做偏移,可以这样:

background: url('test.png') no-repeat #58a;
background-position: right 20px bottom 30px;

这是css3支持的,有的不支持此属性,元素会贴在左上角,可以在background里添加值right bottom,这样不支持background-position时,元素仍能在右下角

background-origin

background-position的位置是相对padding-box的角,background-origin用来定义background-position相对的是哪个角,所以它默认值是padding-box:

当padding和background-position值一样时,每次需要改三个值,可改background-origin为content-box将background-position的值设为相对content角,则不需要要再给bp定义方向上的偏移值

calc

通过calc计算的边距是相对左上角而言的,注意,calc运算符左右一定要加空白符,不然解析错误

1.4 边框内圆角

用两个div元素可方便实现内圆角外直角的效果

怎样用一个div实现,而不是用两个div?答案是外直角用outline实现,内圆角和直角的间隙填充outline相同颜色即可

1.5 条纹背景

基础效果

.testb {
background:linear-gradient(#fb3,#58a);
font-size: 3em;
}
<div class="testb"><p>test</p></div>

改变颜色渐变位置

.testb {
background:linear-gradient(#fb3 20%,#58a 80%);
font-size: 5em;
}

如果两种颜色位置重复,则无渐变效果

.testb {
background:linear-gradient(#fb3 50%,#58a 50%);
font-size: 5em;
}

调整一个单位的宽与高,通过background-size属性调整,第一个是宽第二个是高,条纹会在背景范围内平铺

.testb {
background:linear-gradient(#fb3 50%,#58a 50%);
font-size: 5em;
background-size: 100% 10px;
}

另外一种写法,一样的效果。如果色标位置比前一个色标位置小,则该色标位置会设为前面所有色标位置最大的值,可避免每次霰弹式修改

.testb {
background:linear-gradient(#fb3 50%,#58a 0);
font-size: 5em;
background-size: 100% 25px;
}

三种颜色的条纹

.testb {
background:linear-gradient(#fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
font-size: 5em;
background-size: 100% 25px;
}

垂直条纹,给linear-gradient第一个参数前加方向参数,默认是水平条纹,即to bottom,垂直调味改为to right,对应background-size的条纹宽也要改

.testb {
background:linear-gradient(to right, #fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
font-size: 5em;
background-size: 25px 100%;
}

尝试45度倾斜条纹,直接改linear-gradient首个参数,发现不行,是因为收到background-size影响

.testb {
background:linear-gradient(45deg, #fb3 30%,#58a 0, #58a 66%, yellowgreen 0);
font-size: 5em;
background-size: 25px 100%;
}

再次尝试,让background-size每个单位的倾斜条纹重合,数学算一下,对齐一下,还得新增几个色标

.testb {
background:linear-gradient(45deg, #fb3 25%,#58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
font-size: 5em;
background-size: 25px 25px;
}

其实这样计算的条纹方法很鸡肋,更复杂的条纹计算会很麻烦,有没有更好的条纹方法?有,有一种线性循环加强版条纹属性repeating-linear-gradient。这个可以很好的应用于倾斜条纹的平铺

.testb {
background:repeating-linear-gradient(45deg, #fb3, #58a 25px);
font-size: 5em;
}

看一个效果好的

.testb {
background:repeating-linear-gradient(30deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
font-size: 5em;
}

1.6 复杂的背景图案

条纹

用透明叠加条纹

.testa {
background:white;
background-image:linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent 0),linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent 0);
background-size:30px 30px;
font-size: 90px;
}

网格

.testa {
background:#58a;
background-image:linear-gradient(white 1px,transparent 0),linear-gradient(90deg,white 1px, transparent 0);
background-size:30px 30px;
font-size: 90px;
}

 

.testa {
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;
font-size: 90px;
}

其中,background-size有多个值,每个值与background-image应该是一一对应的

波点

看一些径向渐变

.testa {
background:#655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
font-size:5em;
}

tan是一种颜色,30%是径向渐变的半径占背景大小的百分比

叠加波点阵列

.testa {
background:#655;
background-image: 
	radial-gradient(tan 30%, transparent 0),
	radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
font-size:5em;
}

使用函数创建波点

@mixin polka ($size, $dot, $base, $accent) {
	background: $base;
	background-image:
		radial-gradient($access $dot, transparent 0),
		radial-gradient($accent $dot, transparent 0);
	background-size: $size $size;
	background-position: 0 0, $size/2 $size/2;
}
.testa {@include polka (30px,30%,#655,tan);}

效果没出来,不知道在哪定义scss,好像不能直接在html定义,后面再看

棋盘

原理:斜向45度上下三角形拼成棋盘

.testa {
background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
font-size: 5em;
}

.testa {
background: #eee;
background-image: 
	linear-gradient(45deg, transparent 75%, #bbb 0),
	linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 30px 30px;
font-size: 5em;
}

将每个background单元移动一下,把三角形拼成正方形

.testa {
background: #eee;
background-image: 
	linear-gradient(45deg, transparent 75%, #bbb 0),
	linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
font-size: 5em;
}

再重复一下创建相邻棋盘

.testa {
background: #eee;
background-image: 
	linear-gradient(45deg, transparent 75%, #bbb 0),
	linear-gradient(45deg, #bbb 25%, transparent 0),
	linear-gradient(45deg, transparent 75%, #bbb 0),
	linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
font-size: 5em;
}

另一种三角形拼接也可以,但是引入了颜色的函数

.testa {
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;
font-size: 5em;
}

1.7 伪随机背景

.testa {
background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;
font-size: 5em;
}

将这种图案再进行叠加遮盖可生成较难察觉的伪随机背景

1.8 连续的图像边框

通过透明border实现背景图案透明的边框

通过多背景图案与不同对齐效果实现信封边框效果

2 形状

2.1 自适应椭圆

2.1.1 椭圆

通过border-radius实现,border-radius支持单独规定圆角的宽和高,即我们可以设置圆角宽高不同,如果宽高相同是圆角,宽高不同则是椭圆角,写法通过斜杠分隔:border-radius: 100px / 75px 但这种方法需要手动指定椭圆角的尺寸,无法自适应

.testa {
background: #fb3;
border-radius: 1.5em / 1em;
font-size: 5em;
}

border-radius可支持百分比的宽高设定,如果宽高相同则可以去掉斜杠,把两个相同参数删掉一个,用一个参数写,写50%就是自适应椭圆

.testa {
background: #fb3;
border-radius: 50%;
font-size: 5em;
}

2.1.2 半椭圆

border-radius也可以四个角指定属性分布,但不如直接写到border-radius属性简洁。四角都写到border-radius的话,会从左上角顺时针给四个角赋值。如果提供三个值,第四个值和第二个值一样,详见下图。直接四个角赋值,斜杠前后各写四个值即可

.testa {
background: #fb3;
border-radius: 5% 10% 15% 25% / 10% 20% 30% 50%;
font-size: 5em;
}

2.1.3 四分之一椭圆

.testa {
background: #fb3;
border-radius: 100% 0 0 0;
font-size: 5em;
}

7 结构与布局

7.1 垂直居中

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15555.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!