CSS 揭秘

第一章 CSS 编码技巧

一、尽量减少代码重复

代码易维护 vs. 代码量少

不足
border-width: 10px 10px 10px 0;
好的
border-width: 10px; border-left-width: 0;

currentColor （css 第一个变量）
举个例子，假设我们想让所有的水平分割线（所有 hr 元素）自动与
文本的颜色保持一致。有了 currentColor 之后，我们只需要这样写：
```
hr {
 height: .5em;
 background: currentColor;
}
```

继承(inherit)
它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。

.callout { position: relative; }
.callout::before {
 content: "";
 position: absolute;
 top: -.4em; left: 1em;
 padding: .35em;
 background: inherit;
 border: inherit;
 border-right: 0;
 border-bottom: 0;
 transform: rotate(45deg);
}

第二章背景与边框

1、半透明边框
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body
的背景会从它的半透明边框透上来

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;//背景会被元素的 border box（边框的外沿框）裁切掉

多重边框

box-shadow 方案
目前为止，我们大多数人可能已经用过（或滥用过）box-shadow 来生
成投影。不太为人所知的是，它还接受第四个参数（称作“扩张半径”），通
过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加
上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线
边框

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

它支持逗号分隔语法，我们可以创建任意数量的投影

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

（图1）

box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。因此，你需要按此规律调整扩张半径。
如果你愿意，甚至还可以在这些“边框”的底下再加一层常规的投影：

注意： 上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给
box-shadow 属性加上 inset 关键字，来使投影绘制在元素的内圈。
请注意，此时你需要增加额外的内边距来腾出足够的空隙。

outline 方案
实现（图1）的效果，代码可以这样写：

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

    background: #655;
    outline-offset: -20px;
    outline: 2px dotted #fff;

灵活的背景定位

background-position

    background: url(https://www.runoob.com/try/demo_source/img_pulpit.jpg) no-repeat #58a;
    background-position: right 120px bottom 20px;

uploading-image-509952.png

background-origin

    background: url(https://www.runoob.com/try/demo_source/img_pulpit.jpg) no-repeat #58a bottom right;
    padding: 10px;
    background-origin: content-box;

calc()
把背景图片定位到距离底边 10px 且
距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑，其实
就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直
偏移量。谢天谢地，calc() 函数允许我们执行此类运算，它可以完美地在
background-position 属性中使用：

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

第三章形状

自适应的椭圆
说到 border-radius，有一个鲜为人知的真相：它可以单独指定水平
和垂直半径，只要用一个斜杠（/）分隔这两个值即可。这个特性允许我
们在拐角处创建椭圆圆角（参见图 3-3）。因此，如果我们有一个尺寸为
200px×150px 的元素，就可以把它圆角的两个半径值分别指定为元素宽高的
一半，从而得到一个精确的椭圆：
border-radius: 100px / 75px;
平行四边形
transform: skewX(-45deg);

<a href="#yolo" class="button">
 <div>Click me</div>
</a>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

菱形图片

<div class="picture">
 <img src="https://www.runoob.com/try/demo_source/img_pulpit.jpg" alt="..." />
</div>
.picture {
width: 100px;
transform: rotate(45deg);
overflow: hidden;
height: 100px;
border: 1px dotted;
}
.picture > img {
transform: rotate(-45deg);
width: 100px;
height: 100px;
border: 1px solid #665;
}

4. 饼图

<svg width="100" height="100">
 <circle r="25" cx="50" cy="50" />
</svg>
circle {
 fill: yellowgreen;
 stroke: #655;
 stroke-width: 50;
 stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */
}
svg {
 transform: rotate(-90deg);
 background: yellowgreen;
 border-radius: 50%;
}

毛玻璃
切角
background: linear-gradient(-45deg, transparent 15px, #58a 0);
折角

.note {
 position: relative;
 background: #58a; /* 回退样式 */
 background:
 linear-gradient(-150deg,
 transparent 1.5em, #58a 0);
 border-radius: .5em;
}
.note::before {
 content: '';
 position: absolute;
 top: 0; right: 0;
 background: linear-gradient(to left bottom,
 transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
 100% 0 no-repeat;
 width: 1.73em;
 height: 3em;
 transform: translateY(-1.3em) rotate(-30deg);
 transform-origin: bottom right;
 border-bottom-left-radius: inherit;
 box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

文本行的斑马条纹

方案一

  padding: 0.5em;
  line-height: 1.5;
  background: #dcf5f2;
  background-size: auto 5em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);


![](https://img2022.cnblogs.com/blog/1078093/202203/1078093-20220325164619127-2002142048.png)

* 方案二
`tr:nth-child(even)`

9. 自定义下划线
*  下划线：实线
```javascript
   background: linear-gradient(gray, gray) no-repeat;
   background-size: 100% 1px;
   background-position: 0 1.15em;
   text-shadow: 0.05em 0 white, -0.05em 0 white;

下划线：虚线

background: linear-gradient(90deg, gray 50%, transparent 0) repeat-x;
background-size: 0.4em 1px;
background-position: 0 1.3em;

下划线：波浪线

    background: linear-gradient(-45deg, transparent 40%, red 50%, red 0%, transparent 0) 0 1em, linear-gradient(45deg, transparent 40%, red 0, red 50%, transparent 0) 0.1em 1em;
    background-repeat: repeat-x;
    background-size: 0.2em 0.3em;
    text-shadow: 0.05em 0 white, -0.05em 0 white;

10. 凸版印刷效果

    background: hsl(210, 13%, 40%);
    color: hsl(210, 13%, 75%);
    text-shadow: 0 -1px 1px black;

11. 空心字效果

background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px -1px black,
 1px -1px black, -1px 1px black;

发光

.text{
    background: #203;
    color: white;
    transition: 1s;
    cursor: pointer;
}
.text:hover{
  text-shadow: 0 0 0.1em, 0 0 0.3em;
}

13. 文字凸起效果

    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0deg 0% 85%), 0 2px hsl(0deg 0% 80%), 0 3px hsl(0deg 0% 75%), 0 4px hsl(0deg 0% 70%), 0 5px hsl(0deg 0% 65%), 0 5px 10px black;
    padding: 20px;

滚动提示

    background: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0,0,0,.2), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 50px, 100% 15px;
    background-attachment: local, scroll;

备注

此书很适合 css 中级到高级的同学，电子书籍可在百度网盘中下载：
链接：https://pan.baidu.com/s/1XKPhRk8s1rVYddzYcCOMbw
提取码：css8

posted @ 2022-03-25 17:59 会吃鱼的猫123 阅读(111) 评论(0) 编辑收藏举报

刷新页面返回顶部

会吃鱼的猫123

CSS 揭秘

第一章 CSS 编码技巧

一、尽量减少代码重复

第二章 背景与边框

第三章 形状

备注

公告

第二章背景与边框

第三章形状