《CSS揭秘》--笔记

最新推荐文章于 2024-01-26 16:09:53 发布

phoebe_huang

最新推荐文章于 2024-01-26 16:09:53 发布

阅读量401

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/PigBiBiX/article/details/114495447

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、减少代码的依赖，行高line-height与字体大小font-size存在关系，避免修改字体大小后又要手动修改行高，应该像下面这样写

button {
  padding: 6px 16px;
  border: 1px solid #446d88;
  background: #58a linear-gradient(#77a0bb, #58a);
  border-radius: 4px;
  box-shadow: 0 1px 5px gray;
  color: white;
  text-shadow: 0 -1px 1px #335166;
  font-size: 20px;
  line-height: 1.5;
}

2、用CSS写一个对话框

<input type="text">
<div class="dialog">Hello World!</div>

body {
  padding: 50px;
}
.dialog {
  width: 100px;
  height: 30px;
  background: #FFEBCD;
  border: 1px solid #ccc;
  margin-top: 3px;
  position: relative;
}
.dialog::before {
  content: "";
  position: absolute;
  top: -.4em;
  left: 1em;
  padding: .35em;
  background: inherit;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

3、半透明边框。容器的背景默认会延伸到边框坐在的区域下层。如果需要边框半透明，不显示背景颜色，需要设置background-clip

body {
  background: pink;
}
div {
  width: 200px;
  height: 200px;
  border: 20px solid hsla(0, 0%, 100%, .4);
  background: blue;
  background-clip: padding-box;
}

4、background-origin，用于确定background-position 定义的左上角的位置。

左上角的位置主要是受盒子模型的影响。

CSS box-model

图片来源：菜鸟教程

5、边框内圆角

<div class="div_1">
<div>  I have something to say.
</div>
</div>


.div_1 {
  width: 200px;
  background: #655;
  padding: .8em;
}
.div_1 > div {
  background: tan;
  border-radius: .8em;
  padding: 1em;
}

6、条纹背景

水平方向

div {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 50px;
}
.div1 {
  background: linear-gradient(#fb3, #58a);
}
.div2 {
  background: linear-gradient(#fb3 20%, #58a 80%);
}
.div3 {
  background: linear-gradient(#fb3 50%, #58a 50%);
}
.div4 {
  background: linear-gradient(#fb3 30%, #58a 30%);
  background-size: 100% 30px
}
/*  如果第二个色值设置为0，那它的位置就被设置为前一个色标的位置值 */
.div5{
  background: linear-gradient(#fb3 30%, #58a 0);
  background-size: 100% 30px
}

7、平行四边形

嵌套元素

<div class="button">
  <div>Click Me</div>
</div>

.button {
  transform: skewX(-45deg);
  background: darkblue;
  width: 100px;
  text-align: center;
  color: #fff;
}
.button > div {
  transform: skewX(45deg);
}

伪元素

利用伪元素，可以减少对宿主元素的字体内容的影响

.button {
  width: 100px;
  text-align: center;
  color: #fff;
  position: relative;
}
.button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: darkblue;
  transform: skew(-45deg);
}

8、菱形图片

<div class="pic">
  <img>
</div>

.pic {
  width: 100px;
  transform: rotate(45deg);
  overflow: hidden;
}
.pic > img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}

9、切角效果

div {
  width: 500px;
  height: 120px;
  padding: 10px 20px;
  background: linear-gradient(-45deg, transparent 15px, #58a 0);
}

10、梯形

div {
  position: relative;
  display: inline-block;
  padding: .5em 1em .35em;
  color: #fff;
}
div::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #58a;
  transform: perspective(.5em) rotateX(5deg);
}

11、饼图

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: lightblue;
}
div::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #655;
  transform-origin: left;
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: lightblue;
}
div::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #655;
  transform-origin: left;
  transform: rotate(.1turn);
}

12、阴影

阴影生成的原理

box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);

(1)绘制一个指定颜色的矩形

(2)矩形向右2px，向下3px

(3)高斯模糊进行4px的模糊

(4)切掉交集部分

13、单侧阴影

div {
  width: 200px;
  height: 200px;
  background: lightblue;
  box-shadow: 0 5px 4px -4px black;
}

14、双侧影像

div {
  width: 200px;
  height: 200px;
  background: lightblue;
  box-shadow: 5px 0 4px -4px black,
          -5px 0 4px -4px black;;
}

15、滤镜效果

.img {
  transition: .5s filter;
  filter: sepia(1) saturate(4);
}
.img:hover {
  filter: none;
}

16、毛玻璃效果

<div class="main">
  猫，属于猫科动物，分家猫、野猫，是全世界家庭中较为广泛的宠物。家猫的祖先据推测是古埃及的沙漠猫，波斯的波斯猫，已经被人类驯化了3500年（但未像狗一样完全地被驯化）。一般的猫：头圆、颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩。夜行性。
以伏击的方式猎捕其它动物，大多能攀援上树。猫的趾底有脂肪质肉垫，以免在行走时发出声响，捕猎时也不会惊跑鼠。行进时爪子处于收缩状态，防止爪被磨钝，在捕鼠和攀岩时会伸出来
</div>

body {
  background: url("https://b-ssl.duitang.com/uploads/item/201710/15/20171015120125_Kurjz.jpeg") 0 / cover;
}
.main {
  margin: 100px;
   width: 600px;
  height: 200px;
  padding: 30px;
  position: relative;
  background: hsla(0, 0%, 100%, .5);
  overflow: hidden;
}

17、40度折角

div {
  margin: 100px;
  width: 600px;
  padding: 30px;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
  color: #fff;
}

18、连字符断行

hyphens: auto;

19、空心字效果

div {
  font-size: 100px;
  background: lightblue;
  color: white;
  text-shadow: 3px 3px black, -3px -3px black,
           3px -3px black, -3px 3px black;
}

20、发光字体

  background: #203;
  padding: 50px;
  font-size: 50px;
  color: #ffc;
  text-shadow: 0 0 .1em, 0 0 .3em;

21、立体文字

  background: #203;
  padding: 50px;
  font-size: 50px;
  color: #fff;
  text-shadow: 0 1px hsl(0,0%,85%),
    0 2px hsl(0,0%,80%),
    0 3px hsl(0,0%,75%),
    0 4px hsl(0,0%,70%),
    0 5px hsl(0,0%,65%),
    0 5px 10px black;

22、鼠标光标图案

20、自定义复选框和单选框

<input type="checkbox" id="Awesome1" />
<label for="Awesome1">Awesome1</label>

<input type="radio" id="Awesome2"  name="1"/>
<label for="Awesome2">Awesome2</label>
<input type="radio" id="Awesome3" name="1"/>
<label for="Awesome3">Awesome3</label>

body {
  padding: 100px;
}
input[type="checkbox"] + label::before {
  content: '\a0';  /* 不换行空格 */
  display: inline-block;
  vertical-align: .2em;
  width: .8em;
  height: .8em;
  margin-right: .2em;
  border-radius: .2em;
  background: silver;
  text-indent: .15em;
  line-height: .45;
}
input[type="checkbox"]:checked + label::before {
  content: '\2713';
  background: yellowgreen;
}
input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}


input[type="radio"] + label::before {
  content: '\a0';  /* 不换行空格 */
  display: inline-block;
  vertical-align: .2em;
  width: .8em;
  height: .8em;
  margin-right: .2em;
  border-radius: 50%;
  background: silver;
  text-indent: .15em;
  line-height: .45;
}

input[type="radio"]:checked + label::before {
  content: '\25CF';
  background: yellowgreen;
  color: darkgreen;
}
input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

22、滚动阴影

<ul>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen</li>
  <li>code pen00</li>
</ul>

ul {
  overflow: auto;
  width: 10em;
  height: 8em;
  padding: .3em .5em;
  border: 1px solid silver;
  background: linear-gradient(white, hsla(0, 0%, 100%, 0)),
    radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: local, scroll;
  background-size: 100% 50px, 100% 15px;
}

23、自适应内部元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
figure {
  width: min-content;
  margin: auto;
  
  /*兼容*/
  max-width: 300px;
}
</style>
</head>
<body>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</p>
<figure>
	<img src="images/miemie.png" />
	<figcaption>Some text Some text Some textSome text Some text Some textSome text Some text Some text</figcaption>
</figure>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</p>
</body>
</html>

24、定宽定稿垂直居中

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -200px;
  width: 400px;
  height: 100px;

25、非定宽定高垂直居中

（1）绝对定位

  width: 20%;
  height: 10%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);

phoebe_huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《CSS揭秘》--笔记

1、减少代码的依赖，行高line-height与字体大小font-size存在关系，避免修改字体大小后又要手动修改行高，应该像下面这样写button { padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-
复制链接

扫一扫

专栏目录