当前位置: 首页 > news >正文

【CSS揭秘】笔记

目录

    • 背景与边框
      • 半透明边框
      • 多重边框
      • 灵活的背景定位
      • 条纹背景
      • 复杂的背景图像
    • 形状
      • 自适应椭圆
      • 平行四边形
    • 视觉效果
      • 不规则投影
    • 字体排印
      • 自定义下划线
    • 用户体验
      • 选用合适的鼠标光标

背景与边框

半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明的白色边框,body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样:

background: #fff; <br/>// border: 10px solid hsla(0, 0%, 100%, 0.5);<br/>
border: 10px solid rgba(255, 255, 255,0.5);<br/>

但是效果却不是我们所想要的效果,我们的边框去哪里了
在这里插入图片描述


我可以通过background-clip属性来调整上述默认行为所带来的不变,这个属性的初始值是border-box,这个值意味着背景会被元素的外边距裁剪掉,但是可以通过设置background-clip属性为padding-box,这样就是用元素的内边距把背景裁切掉:

  background: #fff;// border: 10px solid hsla(0, 0%, 100%, 0.5);border: 10px solid rgba(255, 255, 255,0.5);background-clip: padding-box;

在这里插入图片描述

多重边框

【box-shadow方案:使用它的第四个参数,可以让投影面积加大或减少,得到的“投影”就像一道边框】

background: #8fe603;
box-shadow: 0 0 10px #655,0 0 0 10px deeppink,0 2px 5px 15px rgba(0,0,0,.6)

在这里插入图片描述

【outline方案:你可以只需要两层边框,可以先设置一层常规边框,再加上outline(描边)属性来产生外层的边框】

  background: #8fe603;border: 10px solid red;outline: 5px dashed #000;outline-offset: 10px; // 控制它跟元素边缘之间的间距

在这里插入图片描述

灵活的背景定位

举例说明,如果想要让背景图片跟右边缘保持20px的偏移量,同时跟底部保持10px的偏移量。

【background-position方案】

background:url('../assets/logo.png') no-repeat #0a0a0a;
background-position: right 20px bottom 10px;

思考:right,bottom是那个的右下角?
每个元素身上都存在三个矩形框:border box(边框的外沿框),padding box(内边距的外沿框),content box(内容外沿框)。
默认情况下,background-position是以padding box为参照的,这样边框才不会遮住背景图片。因此right,bottom默认指的是padding box的右下角。不过在背景与边框(第三版)中,我们得到了一个新的属性:background-origin,它可以设置背景图片的参照物。background-origin属性有三个值:padding-box(默认值),border-box,content-box。

【calc()方案】

background:url('../assets/logo.png') no-repeat #0a0a0a;
background-position: calc(100% - 20px) calc(100% - 10px);

条纹背景

【水平条纹】

  background: linear-gradient(#fb3 50%, #58a 50%); // 或者 background: linear-gradient(to bottom,#fb3 50%, #58a 50%); background-size: 100% 30px;

在这里插入图片描述

【垂直条纹】

  background: linear-gradient(to right,#fb3 50%, #58a 50%);background-size: 30px 100%;

在这里插入图片描述

【斜向条纹】

  background: linear-gradient(45deg, #fb3 50%, #58a 50%);background-size: 100% 50%;

在这里插入图片描述

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

在这里插入图片描述

复杂的背景图像

【网格】

  background:rgb(2, 2, 2);background-image: linear-gradient(white 1px,transparent 0),linear-gradient(90deg,rgb(235, 13, 13) 1px,transparent 0);background-size: 30px 30px;

在这里插入图片描述

【波点】

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

在这里插入图片描述

【棋盘】

    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, 25px 25px, 25px 25px, 50px 50px;background-size: 50px 50px;

在这里插入图片描述

形状

自适应椭圆

如果我们有一个尺寸为 200px X 150px的元素,就可以把它圆角的两个半经值分别指定为元素宽高的一半,从而得到一个精准的椭圆:

  width: 200px;height: 150px;border-radius: 100px / 75px;

但是,这段代码存在很大的缺陷,只要元素的尺寸发生变化,border-radius属性的值就得跟着改变。因此有更好的解决方法,使用百分比:border-radius: 50%;

【半椭圆】

  width: 200px;height: 150px;border: 1px solid;border-radius: 50%/100% 100% 0 0;

在这里插入图片描述

【四分之一椭圆】

  width: 200px;height: 150px;border: 1px solid;border-radius: 100% 0  0 0;

在这里插入图片描述

平行四边形

  width: 200px;height: 150px;border: 1px solid;transform: skewX(-45deg);

在这里插入图片描述

但是,这导致它的内容也发生了斜向变形,不好看,有没有办法只让容器的形状倾斜,而保持其内容不变呢?
1,内容再应用一次skew()变形;

2,使用伪元素

.test {position: relative;width: 200px;height: 150px;
}
.test::before { content: "";top: 0;right: 0;bottom: 0;left: 0;border: 1px solid;position: absolute;transform: skewX(-45deg);
}

视觉效果

不规则投影

// drop-shadow(offset-x offset-y blur-radius color);
filter: drop-shadow(2px 2px 5px rgba(231, 7, 7, 0.5));

在这里插入图片描述

字体排印

自定义下划线

【方法一】

  width: 50px;border-bottom:1px solid red 

;

在这里插入图片描述

【方法二】

  width: 50px;box-shadow: 0 -1px gray inset;

在这里插入图片描述

box-shadow: x-offset y-offset blur-radius spread-radius color [inset];
x-offset:水平方向偏移量,正值向右,负值向左。
y-offset:垂直方向偏移量,正值向下,负值向上。
blur-radius:模糊半径,值越大越模糊,默认为 0 表示无模糊。
spread-radius:阴影扩大/缩小,正值阴影变大,负值变小(可选)。
color:阴影颜色(可选,默认为黑色)。
inset:可选值,表示阴影是向内的(内部阴影),如果不加则默认是外阴影。

【方法三】

  width: 50px;background: linear-gradient(90deg, red 66%, transparent 0) repeat-x;background-size: 100% 1px;background-position: 0 1.5em;

在这里插入图片描述

【方法一】和【方法二】会阻止正常的文本换行行为,最佳方法是使用【方法三】。

用户体验

选用合适的鼠标光标

cursor: pointer;

在这里插入图片描述
在这里插入图片描述

http://www.xdnf.cn/news/1078759.html

相关文章:

  • 网络基础(3)
  • HTML初学者第二天
  • 利用tcp转发搭建私有云笔记
  • Chart.js 安装使用教程
  • 【强化学习】深度解析 GRPO:从原理到实践的全攻略
  • 怎样理解:source ~/.bash_profile
  • vscode vim插件示例json意义
  • 电子电气架构 --- SOVD功能简单介绍
  • 如何系统性评估运维自动化覆盖率:方法与关注重点
  • Spark流水线数据探查组件
  • 【字节跳动】数据挖掘面试题0002:从转发数据中求原视频用户以及转发的最长深度和二叉排序树指定值
  • 计算机视觉的新浪潮:扩散模型(Diffusion Models)技术剖析与应用前景
  • 六、软件操作手册
  • 【Python】进阶 - 数据结构与算法
  • Python 高光谱分析工具(PyHAT)
  • Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
  • vue中的toRef
  • C#上位机串口接口
  • docker常见命令
  • 模型预测专题:强鲁棒性DPCC
  • Springboot开发常见注解一览
  • C++ 完美转发(泛型模板函数)
  • CSS外边距合并(塌陷)全解析:原理、场景与解决方案
  • apoc-5.24.0-extended.jar 和 apoc-4.4.0.36-all.jar 啥区别
  • 大数据平台与数据中台:从概念到落地的系统化实践指南
  • Point-LIO代码阅读与解析
  • opencv基础的图像操作
  • 回顾JAVA中的锁机制
  • 2-RuoYi-UI管理平台的启动
  • 少样本学习在计算机视觉中的应用:原理、挑战与最新突破