css揭秘书籍示例汇总+理解实现

最新推荐文章于 2024-08-16 22:57:43 发布

xjt_0901

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量368

点赞数

分类专栏： 04.css编写相关文章标签： css 前端 css3

本文链接：https://blog.csdn.net/a2274001782/article/details/125648182

版权

04.css编写相关专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第一章引言

01.书中提到的会常用的函数

02.自制提示框

提示框三角实现方式

移动位置ss
当不设置宽高时设置padding会自动填充div 形成一个正方体
设置背景色为继承提高代码健壮性
去除右边和下边边框
旋转—样式变为三角且覆盖原来边框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="callout"></div>
<style>
	/* 提示框主体*/
    .callout {
         position: relative;
         width: 200px;
         height:120px;
         background-color: red;
         border: 1px solid blue;
    }
	/* 提示框三角
	   01.移动位置
	   02.当不设置宽高时 设置padding会自动填充div 形成一个正方体
       03.设置背景色为继承 提高代码健壮性
       04.去除右边和下边边框
       05.旋转---样式变为三角且覆盖原来边框
	*/
    .callout::before {
         content: "";
         position: absolute;
         top: 10rem;
         left: 1em;
         padding: 40px;
         background: inherit;
         border: inherit;
         border-right: 0;
         border-bottom: 0;
         /* transform: rotate(45deg); */
    }
    .callout::after {
         content: "";
         position: absolute;
         top: -.4em;
         left: 1em;
         padding: .35em;
         background: inherit;
         border: inherit;
         border-right: 0;
         border-bottom: 0;
         transform: rotate(45deg);
    }
</style>
</body>

</html>

第二章背景与边框

01.使元素背景不覆盖其边框

默认情况下border下是被覆盖的背景色，正常情况下是没什么影响的，但当我们想设置边框透明度时，就会有些麻烦产生。

从背景与边框（第三版）（ http://w3.org/TR/css3-background）开
始，我们可以通过 background-clip 属性来调整上述默认行为所带来的不
便。这个属性的初始值是 border-box，意味着背景会被元素的 border box
（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做
的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背
景裁切掉。
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
否则

测试实例2

不设置背景裁剪
/* 测试主体*/
.callout {
 position: relative;
 width: 200px;
 height:200px;
 background-color: red;
 border: 1px solid rgb(0, 0, 255,.2);
 /* 不添加背景裁剪 */
 /* background-clip: padding-box; */
}
设置背景裁剪
/* 测试主体*/
.callout {
 position: relative;
 width: 200px;
 height:200px;
 background-color: red;
 border: 1px solid rgb(0, 0, 255,.2);
 /* 添加背景裁剪 */
 background-clip: padding-box;
}

02.巧妙添加多重边框

01.单重实线投影模拟边框
/* 测试主体*/
background: yellowgreen;
box-shadow: 0 0 0 10px #655;/* 一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值， 得到的“投影”其实就像一道实线边框 */
02.多重实线投影模拟边框
box-shadow 是层层叠加的，第一层投影位于最顶 层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代
码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为
15px（ 10px+5px）。如果你愿意，甚至还可以在这些“边框”的底下再加一
层常规的投影：
background: yellowgreen;
box-shadow: 0 0 0 10px #655, /* 第一层褐色边框*/
         0 0 0 15px deeppink,/* 第二层粉色边框*/
            0 2px 5px 15px rgba(0,0,0,.6);/* 第2层额外添加偏下的阴影*/
注意事项

投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到box-sizing属性的影响。不过，你还是可以通过内边距或外边距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要占据的空间
投影上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈。请注意，此时你需要增加额外的内边距来腾出足够的空隙。
03.outline 方案模拟双重边框
在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边
框，再加上 outline（描边）属性来产生外层的边框。这种方法的一大优
点在于边框样式十分灵活，不像上面的 box-shadow 方案只能模拟实线边框
（假设我们需要产生虚线边框效果， box-shadow 就没辙了）。如果要得到图
2-6 的效果，代码可以这样写：
background: yellowgreen;
border: 10px solid #655;/* 第一层border边框*/
outline: 5px solid deeppink;/* 第二层outline边框 这次不用计算叠加距离了*/
附：outline可以达到缝边效果
/* 测试主体*/
.callout {
 position: relative;
 width: 200px;
 height:200px;
 background-color: red;
 border: 1px dashed rgb(0, 0, 0);
 outline: 5px solid red;/*缝边效果 没咋看出来有啥奇特的*/
}

03.灵活改变背景定位

01.背景位置的语法拓展
从
background-position: bottom right;
到
background-position: right 20px bottom 10px;
更改更具有代码健壮性
02.修改背景图片基准
background-origin: content-box;
03.calc()方案
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px)

04.边框内圆角

01.老实人写法

用两个元素实现一个元素作为矩形背景一个元素作为圆角边框
<div class="something-meaningful"><div>
 I have a nice subtle inner rounding,
 don't I look pretty?
</div></div>
/* 矩形背景 */
.something-meaningful {
 background: #655;
 padding: .8em;
}
/* 圆角边框 */
.something-meaningful > div {
 background: tan;
 border-radius: .8em;
 padding: 1em;
}
其实老实人挺好的背景矩形边框还可以使用渐变色，酷炫拽

02.单元素实现

最终代码

<div class="something-meaningful">
I have a nice subtle inner rounding,
don't I look pretty?
</div>
<style>
.something-meaningful {
  background: tan;
  border-radius: .8em;
  padding: 1em;
  box-shadow: 0 0 0 .6em #655;/* 填充缝隙 */
  outline: .6em solid #655;
}
</style>

css新版本已修正 outline会跟着内边框一起变动目前只能用老实人写法了

.something-meaningful {
 background: tan;
 border-radius: .8em;
 padding: 1em;
 outline: .6em solid #655;/* 随着边框一起变动 */
}

06.条纹背景

01.水平条纹
核心思路：渐变色的平铺（背景色默认为平铺）+渐变色标的重叠（渐变色只存在于两个色标距离之间，距离足够小表现为实线）

a.最基础等宽条纹
<div class="something-meaningful">
</div>
<style>
.something-meaningful {
width: 100px;
height: 100px;
background: linear-gradient(#fb3 50%, #58a 50%);
}
</style>
b.调整背景尺寸实现平铺
<div class="something-meaningful">
</div>
<style>
.something-meaningful {
width: 100px;
height: 100px;
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
}
</style>
c.不等宽平铺条翁
<div class="something-meaningful">
</div>
<style>
.something-meaningful {
width: 100px;
height: 100px;
/*background: linear-gradient(#fb3 30%, #58a 30%);*/
/*进阶写法*/
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
}
</style>
4.三色条纹
<div class="something-meaningful">
</div>
<style>
.something-meaningful {
width: 100px;
height: 100px;
background: linear-gradient(#fb3 33.3% , #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
}
</style>
02.垂直条纹
相较横向条纹，需要调整渐变方向和背景尺寸
<body>
 <div class="something-meaningful">
 </div>
<style>
  .something-meaningful {
      width: 100px;
         height: 100px;
         background: linear-gradient(to right,#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
         background-size:  45px 100%;
     }
 </style>

</body>
03.斜向条纹
01.不动脑筋写法

在完成了水平和垂直条纹之后，我们可能会顺着往下想：如果我们再次改变background-size的值和渐变的方向，是不是就可以得到斜向（比如45°）的条纹图案呢？
<div class="something-meaningful">
</div>
<style>
  .something-meaningful {
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg,#fb3 50%, #58a 0);
      background-size: 30px 30px;
  }
</style>
可以发现，这个办法行不通。原因在于我们只是把每个“贴片”1①内部的渐变旋转了45°，而不是把整个重复的背景都旋转了。试着回忆一下我们以前用位图来生成斜向条纹时是怎么做的吧，做法类似下图。

02.半正确写法

单个贴片包含了四条条纹，而不是两条，只有这样才有可能做到无缝拼接。它正是我们需要在CSS代码中重新实现的贴片，因此我们需要增加一些色标：
<div class="something-meaningful">
</div>
<style>
  .something-meaningful {
      width: 100px;
      height: 100px;
      /*添加四个等长的条纹 注意真正的条纹宽度有个换算关系 45°角*/
      background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
      background-size: 30px 30px;
  }
</style>
缺陷：目前只能绘制45°角条纹其他的角度无法实现（条纹会乱码）

03.最终鲁棒性写法

linear-gradient()和radial-gradient()还各有一个循环式的加强版：repeating-linear-gradient()和repeating-radial-gradient()。它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景
background: repeating-linear-gradient(45deg,#fb3, #58a 30px);
/*等价于*/
background: linear-gradient(45deg,
    #fb3, #58a 30px,
    #fb3 30px, #58a 60px,
    #fb3 60px, #58a 90px,
    #fb3 90px, #58a 120px,
    #fb3 120px, #58a 150px, ...);
最终写法
 <div class="something-meaningful">
 </div>
 <style>
     .something-meaningful {
         width: 100px;
         height: 100px;
         background: repeating-linear-gradient(45deg, #fb3 0 15px, #58a 15px 30px);
     }
 </style>
第一个明显的好处就是减少了重复：我们要改动任何颜色时只需要修改一处，而不是原来的三处。另外一点也很重要，我们现在是在渐变的色标中指定长度，而不是原来的background-size。这里的background-size是初始值，对渐变来说就是以整个元素的范围进行填充。这意味着代码中的长度值更加直观，因为这些长度是直接在渐变轴上进行度量的，直接代表了条纹自身的宽度。我们再也不需要计算什么根号了！不过这还不是最大的好处。最大的好处在于，现在我们可以随心所欲地改变渐变的角度了，指哪儿打哪儿，再也不需要苦苦思索如何生成一个无缝贴片
04.灵活改变同色系条纹
<div class="something-meaningful">
</div>
<style>
  /* 
    不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹
    结果看起来跟图2-37是一模一样的，但我们现在只需要修改一个地方就可以改变所有颜色了。我们还得到了一个额外的好处，对于那些不支持CSS	     渐变的浏览器来说，这里的背景色还起到了回退的作用
  */
  .something-meaningful {
      width: 100px;
      height: 100px;
      background: #58a; //关键点
      background-image: repeating-linear-gradient(30deg,
              hsla(0, 0%, 100%, .1),
              hsla(0, 0%, 100%, .1) 15px,
              transparent 0, transparent 30px);
  }
</style>

07.复杂背景图案

01.桌布背景

<div class="something-meaningful">
</div>
<style>
    /* 桌布方案 */
    .something-meaningful {
        width: 100px;
        height: 100px;
        background: white;
        background-image: linear-gradient(90deg,
            rgba(200, 0, 0, .5) 50%, transparent 0),/* 90°方向是从左到右*/
            linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);/* 不写方向 默认方向从上到下 头bottom*/
        background-size: 30px 30px;/* 圈定一块渐变的范围 */

    }
</style>

02.白线桌布

<div class="something-meaningful">
</div>
<style>
 /* 桌布方案 */
 .something-meaningful {
     width: 100px;
     height: 100px;
     background: #58a;
     /* 背景色 */
     background-image:
         linear-gradient(white 1px, transparent 0),
         /* 横向白线 */
         linear-gradient(90deg, white 1px, transparent 0);
     /* 纵向白线 */
     background-size: 30px 30px;
     /* 圈定一块放款的大小 默认设置了repeat */
 }
</style>

第三章形状

04.切角效果

01.一个切角

.react{
  width: 300px;
  height: 200px;
  /* 0表示10px之后直到100%全为红色 */
  background: linear-gradient(-45deg,transparent 10px,red 0);
}

02.四个切角

.react {
 width: 300px;
 height: 200px;
 background:
     linear-gradient(-45deg, transparent 10px, red 0) bottom right, 
     linear-gradient(45deg, transparent 10px, red 0) bottom left,
     linear-gradient(135deg, transparent 10px, red 0) top left, 
     linear-gradient(-135deg, transparent 10px, red 0) top right;/* 0表示10px之后直到100%全为红色  注意添加方位？*/
 background-repeat: no-repeat;
 background-size: 50% 50%;/* 圈定了背景色延伸的范围 */

}

03.环形切角

.react {
 width: 300px;
 height: 200px;
 background:
     radial-gradient(circle at top left,
         transparent 15px, #58a 0) top left,
     radial-gradient(circle at top right,
         transparent 15px, #58a 0) top right,
     radial-gradient(circle at bottom right,
         transparent 15px, #58a 0) bottom right,
     radial-gradient(circle at bottom left,
         transparent 15px, #58a 0) bottom left;
 background-repeat: no-repeat;
 background-size: 50% 50%;
 /* 圈定了背景色延伸的范围 */
}

04.切角—内联 SVG 与 border-image 方案

.react {
         width: 300px;
         height: 200px;
         border: 20px solid #58a;
         border-image: 1 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"> <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> </svg>');
         background: #58a;
         background-clip: padding-box;
         /* 没怎么看懂 */
     }