跳到主要内容

2.3-盒子进阶属性

Create by fall on — — 2019 Recently revised in 11 May 2024

appearance​

用于控制 UI 控件基于操作系统主题的原生外观。来减少不同平台之间的部分标签，例如 input 难以控制的问题。

常用 aooearance:none，隐藏控件特性

background​

background 是提供一系列修改块的背景的内容

background: #00ff00 url('img.jpg') center center/100% no-repeat fixed;
/* 背景：    背景颜色    背景插图    背景位置  /  图片大小 是否重复 页面滚动样式 */
属性值控制样式
background-color任意颜色表示背景色
background-imageurl（背景地址）默认会铺满整个背景大小
background-position[ left | right | center ] [ top | center | bottom ]背景位置（也可为 px）
background-sizecover,contain,(百分数,宽高)背景图大小
background-repeatrepeat-x,repeat-y,no-repeat控制内容是否重复
background-attachmentscroll、fixed、local背景滚动时移动样式

常用属性​

background-size

background-size：背景图的尺寸大小

  • cover：对图片进行缩放，一部分图片会溢出(图片包裹盒子)
  • contain：图片全放在容器内部（盒子包裹图片）

background-clip

background-clip : 背景图的切片方式（图片显示到哪个位置停止，默认显示到 border）

  • padding-box
  • border-box(默认)
  • content-box
  • text（通过该样式配合字体透明可以实现背景限制在文字内的特殊效果）
  • 注：background-origin 和 background-clip 可以共同控制图片
  • 图片可以填充到 border，然后显示到 content

background-position

背景图的位置，当前图片显示的位置

  • x 方向：left、right、center、px、%
  • y 方向：top、bottom、center、px、%

background-origin

控制背景显示到哪里

  • padding-box（默认）
  • border-box：会显示到 border
  • content-box：仅为内容位置

attachment​

background-attachment

  • scroll：（默认）值按照当前元素进行偏移
  • fixed：在当前盒子显示范围内，背景始终固定在一点
  • local：随着元素内的内容而滚动

image​

background-image

可以使用属性 url，引入展示的图片资源

.box{
  background-image:url(../assets/logo.png)
}

也可以实现不同的渐变效果

  • 线性渐变（linear-gradient）
    • 渐变的起始点是上方，零度起始点是上方
  • 径向渐变（radial-gradient）
    • 选择后可以使渐变自内而外
  • 锥形渐变（扇形渐变）：conic-gradient

线性渐变

可以更改 deg 角度，或者是更改 to bottom、top、left、right

background-image: linear-gradient(60deg, cyan 0, yellow 33%, magenta 66%,cyan 100%);

background-image: linear-gradient(to buttom, cyan 0, yellow 33%, magenta 66%,cyan 100%);

径向渐变

background-image: radial-gradient( cyan 0%,meganta 50%,yellow 70%,black 100%)

background-image: radial-gradient(farthest-corner at 40px 40px,yellow 0%, blue 100%);

锥形渐变

同时插入多个线性渐变，实现取色器（厉害了）

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

这些描述都要自己实验一下，然后进行修改

径向渐变的初始位置取值效果
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。(距离当前渐变中心点最远的一个点，作为0%到100%的距离)

mask​

背景遮罩，可以通过该方式遮住背景，只显示对应背景内容

背景遮罩拥有和 background 类似的属性

者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

.box {
  mask: url(/static/media/chrome.4c57086589fd964c05f5.svg);
	background-color:cyan;
}

阴影​

为内容添加阴影，突出层次效果

text-shadow​

文字的阴影：

text-shadow: 1px 1px    5px   red;
/*           位置偏移  模糊度  颜色  */

注：阴影部分颜色默认和文字颜色相同

可以设置多个阴影，以逗号进行分割

box-shadow​

盒子阴影：

box-shadow:20px 20px    1px     20px        red   inset ;
/*          偏移位置    模糊	阴影扩大大小		颜色   添加 inset 转变为内阴影*/

spread 可以定义盒子的范围，使盒子扩散

inset 添加后可以设置为内阴影

  • 对于阴影来说，尽量相同层级的内容使用相同的阴影
  • 为分层阴影添加动画不是一个好主意
  • 背景为其他颜色时，阴影颜色应为背景颜色，添加灰度
<!-- 背景颜色为蓝色时 -->
<div class="box black1">添加黑色阴影</div>
<div class="box black2">添加深蓝色阴影</div>
<div class="box black3">阴影添加灰度</div>
<style>
  body {
    background-color: hsl(220deg 100% 80%);
  }
  .box {
    height: 200px;
    width: 200px;
    margin: 60px;
    background-color: pink;
    filter: drop-shadow(1px 2px 8px var(--shadow-color))
  }
  .black1 {
    --shadow-color: hsl(0deg 0% 0%)
  }
  .black2 {
    --shadow-color: hsl(220deg 100% 50%)
  }
  .black3 {
    --shadow-color: hsl(220deg 60% 50%)
  }
</style>

盒子表现​

aspect-ratio​

盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

.element{
  aspect-ratio:auto;
}

###　clip-path

用于剪切背景图片，得到对应的图形。

/* 裁切成多边形 */
.triangle {
  clip-path: polygon(0 0,0 100%,100% 0)
}
/* 裁切成圆形 */
.circle{
  clip-path: circle();
}
/* 裁切成椭圆 */
clip-path: ellipse();
/* 裁切成固定大小 */
clip-path: border-box;clip-path: padding-box;clip-path: content-box;

cursor​

cursor（手势）：控制鼠标移动到该元素上面时的鼠标样式

值作用
pointer光标呈现为指示链接的指针（一只手）
move上下左右的箭头
progress正在加载
wait等待
text文本选择悬停

自定义

  • 准备图片（后缀名为 cur 或者 ico）

  • cursor: url("./img/favicon.ico") auto;

scroll-behavior​

滚动表现，scroll-behavior

  • auto：滚动框立即滚动
  • smooth：通过用户预定义滚动函数，时长，来实现平稳滚动

scroll-snap-type​

滚动贴靠的类型（例如移动端上的日期时间选择也会用到滚动贴靠）或者是图片的展示页面

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

滤镜​

filter​

blur 模糊

高斯模糊滤镜，可以通过模糊使用小背景图放大至覆盖画面，进而节省背景图的大小

也可以先使用模糊图片，加载完成后使用大图，以增强用户体验

filter: blur(1px);

brightness(%)

图像明亮度的滤镜，如果值是0%，图像会全黑。值是100%，则图像无变化。

filter: brightness(100%);

contrast：调整图像的对比度

值是 0% 的话，图像会全灰。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。

调整图像的对比度。值是0%的话，图像会全灰。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。
contrast(0)

grayscale(%)

灰度滤镜：更改图像的灰度，值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性。

filter:grayscale(1)

opacity(%)

透明滤镜：

值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。

invert(%)

反转滤镜：值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。

filter: invert(100%); /* 图片会变为反片 */
filter: invert(50%); /* 图片会完全变为灰色 */

hue-rotate(deg)

图像色相滤镜：调整色环角度值。则图像无变化。若值未设置，默认值是 0deg。

filter:hue-rotate(60deg)

drop-shadow

图像阴影滤镜：同样实现阴影，但是 drop-shadow 的阴影不会包括不可见部分（透明区域）的影子

sepia

深褐色滤镜

saturate

饱和度滤镜

backdrop-filter​

filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。

所以 backdrop-filter 使用时，通常伴随着背景的透明。

和 filter 支持同种滤镜

应用​

通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

  • 保证背景高对比度：contrast
  • 保证上面的内容要模糊：blur
<style>
  .container {
    background-color: azure;
    height: 100vh;
    filter: contrast(20)
  }
  .box {
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    filter: blur(10px);
    background-color: #000;
    transform: translate(-50%, -50%);
  }
  .box1 {
    height: 80px;
    width: 80px;
    animation: moveToRight 4s infinite;
  }
  .box2 {
    height: 160px;
    width: 160px;
  }
  @keyframes moveToRight {
    50% { left: 40% }
  }
</style>
<body>
  <div class="container">
    <div class="box box2"> </div>
    <div class="box box1"> </div>
  </div>
</body>

滚动栏样式​

只有谷歌、 edge 浏览器支持设置滚动栏样式

/* 设置滚动条宽度 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

/* 设置滚动条颜色 */
::-webkit-scrollbar-thumb {
  background-color: rgb(150, 150, 150);
  border-radius: 5px;
}
/* 滚动条的底色 */
::-webkit-scrollbar-track {
  background-color: rgb(235, 235, 235);
}
/* 隐藏两端的点击功能 */
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

滚动捕捉​

保证每次滚动，会切换一整个内容，不会只切换一半

/* 滚动时只能滚动到固定的点 */
/* 父元素设置： */
.father{
scroll-snap-type: x mandatory;
}
/* 子元素设置： */
.child{
 scroll-snap-align: center
}
 //start center end//

参考文章​

文章作者连接
非优秀程序员https://juejin.cn/post/7034323356459466760
chokcocohttps://github.com/chokcoco/iCSS/issues/147
MDNMDN 官方文档