Hello World

# 圆角、阴影、文本图像处理、CSS 函数

TIP

CSS 圆角边框、椭圆边框，盒子阴影、文本阴影，文本溢出显示省略号，opacity 透明度，filter 滤镜，object-fit 图片裁剪，防止拖拽文本域，calc 函数，var 函数详细解读和最佳实践

# 一、圆角

TIP

border-radius 用来设置元素的（4 个方向）外边框1/4圆角效果。

圆角类型 描述 举例
圆角边框 当使用一个半径时确定一个圆
表示四个不同方向上边框圆角的半径大小		 border-radius:50px;
椭圆边框 当使用两个半径时确定一个椭圆
两半径用 反斜杆 / 分隔
第一个值是椭圆水平半径，第二个值是椭圆垂直半径		 border-radius:50px / 30px

注：

圆角效果：就是这个 椭圆 或 圆 与 边框 的交集形成的1/4圆角效果

# 1、圆角边框

/* 四个方向上圆角的半径为50px */
border-radius: 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    border: 2px solid skyblue;
  }
  .circle {
    width: 100px;
    height: 100px;
    background-color: khaki;
    /* 上右下左 4个方向边框的圆角半径大小 50px */
    border-radius: 50px;
    /* 上右下左 4个方向边框的圆角半径大小 30px */
    /* border-radius:30px; */
  }
</style>
<body>
  <div class="box">
    <div class="circle"></div>
  </div>
</body>
.circle 的 border-radius:50px 时效果 .circle 的 border-radius:30px;时效果
image-20220723205249582 image-20220723210554223

注：

四个方向（左上角，右上角，左下角，右下角）上的圆角效果，就是 border-radius 属性确定的圆与对应边框相切形成的 1/4 的圆角效果。

# 2、椭圆边框

/*
	x表示椭圆水平半径  
	y表示椭圆垂直半径 
*/
border-radius: x/y;
/*
	20px 表示椭圆水平半径  
	50px 表示椭圆垂直半径 
*/
border-radius: 20px/50px;

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 2px solid skyblue;
    position: relative;
  }
  .oval {
    width: 200px;
    height: 200px;
    background-color: khaki;
    /* 四个方向的椭圆水平半径/垂直半径 */
    border-radius: 80px/100px;
    /* border-radius: 40px/80px; */
  }
</style>
<body>
  <div class="box">
    <div class="oval"></div>
  </div>
</body>
.oval 的 border-radius:80px/100px; .oval 的 border-radius:40px/80px
image-20220723213430150 image-20220723213203428

注：

四个方向（左上角，右上角，左下角，右下角）上的圆角效果，就是 border-radius 属性确定的椭圆与对应边框相切形成的 1/4 的椭圆效果。

# 3、圆角边框 - border-radius 4 种不同值写法

属性值 举例 说明
单值写法 border-radius:50px; 表示上右下左四个方向的圆角半径
双值写法 border-radius:30px 50px; 第一个值表示左上角和右下角
第二个值表示右上角和左下角
三值写法 border-radius:30px 50px 80px; 第一个值表示左上角
第二值表示右上角和左下角
第三值表示右下角
四值写法 border:10px 20px 30px 40px; 四个值，分别表示左上角、右上角、右下角、左下角

单值写法

/* 四个方向的圆角半径为 50px */
border-radius: 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 四个方向的圆角半径为 50px */
    border-radius: 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220723220230133

双值写法

/* 
	30px 表示左上角和右下角 圆角半径
	50px 表示右上角和左下角 圆角半径
*/
border-radius: 30px 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
        	30px 表示左上角和右下角 圆角半径
       	 	50px 表示右上角和左下角 圆角半径
        */
    border-radius: 30px 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220723220443279

三值写法

/* 
	30px 表示左上角 圆角半径
	10px 表示右上角和左下角 圆角半径
	50px 表示右下角 圆角半径
*/
border-radius: 30px 10px 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
            30px 表示左上角 圆角半径
            10px 表示右上角和左下角 圆角半径
            50px 表示右下角 圆角半径
        */
    border-radius: 30px 10px 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220723220733444

四值写法

/* 
    10px 表示左上角 圆角半径
	20px 表示右上角 圆角半径
	30px 表示右下角 圆角半径
    50px 表示左下角 圆角半径
*/
border-radius: 10px 20px 30px 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
            10px 表示左上角 圆角半径
            20px 表示右上角 圆角半径
            30px 表示右下角 圆角半径
            50px 表示左下角 圆角半径
        */
    border-radius: 10px 20px 30px 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220723221044892

# 4、椭圆边框 - border-radius 4 种不同值写法

TIP

反斜杠前面的值表示椭圆水平半径，后面的值表示椭圆的垂直半径。

属性值 举例 描述
单值写法 border-radius:50px/30px; 50px 表示四个不同方向椭圆水平半径
30px 表示 四个不同方向椭圆垂直半径
双值写法 border-radius:10px 20px / 30px 50px; 左上角和右下角，椭圆水平半径 10px，垂直半径 30px
右上角和左下角，椭圆水平半径 20px，垂直半径 50px
三值写法 border-radius:30px 50px 60px /20px 30px 50px; 左上角椭圆水平半径 30px ,垂直半径 20px
右上角和左下角椭圆水平半径 50px，垂直半径 30px
右下角椭圆水平半径 60px ，垂直半径 50px
四值写法 border-radius:10px 20px 30px 40px/40px 30px 20px 10px; 左上角，右上角，右下角，左下角椭圆的水平半径为 10px 20px 30px 40px
左上角，右上角，右下角，左下角椭圆的垂直半径为 40px 30px 20px 10px

单值写法

/*
	30px 表示四个不同方向上椭圆水平半径
	50px 表示四个不同方向上椭圆垂直半径  
*/
border-radius: 30px/50px;

image-20220723230146409

双值写法

/*
	30px 表示左上角和右下角 椭圆水平半径
	50px 表示右上角和左下角 椭圆水平半径
	80px 表示左上角和右下角 椭圆垂直半径
	100px 表示右上角和左下角 椭圆垂直半径
*/
border-radius: 30px 50px / 80px 100px;

image-20220723231150067

三值写法

/*
	左上角椭圆水平半径30px ,垂直半径20px
	右上角和左下角椭圆水平半径 50px，垂直半径30px
	右下角椭圆水平半径60px ，垂直半径50px
*/
border-radius: 30px 50px 60px /20px 30px 50px;

image-20220723231558869

四值写法

/* 
	左上角，右上角，右下角，左下角椭圆的水平半径为 10px 20px 30px 40px
	左上角，右上角，右下角，左下角椭圆的垂直半径为 40px 30px 20px 10px
*/
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;

image-20220723231922803

# 5、border-radius 的值百分比表示法

TIP

  • 百分比% 是相对于当前元素的可视宽和可视高而言
  • 水平半径相当于元素的可视宽而言 水平半径 = (width+padding+border) * 百分比
  • 垂直半径相当于元素的可视高而言 垂直半径 = （height+padding+border) * 百分比
/*
	如果元素的宽为100px  高为 200px  内边距为50px 
	则 20%,换算后，
	椭圆水平半径=（100px+ 50px*2)*20%=40px
	椭圆垂直半径=(200px+50px*2)*20%=60px	
*/
border-radius: 20%;
/*
	如果元素的宽为100px  高为 200px
	则 20%,换算后，
	椭圆水平半径为 100px*20%=20px
	椭圆垂直半径为 200px*50%=100px	
*/
border-radius: 20%/50%;

<style>
  .box {
    width: 400px;
    height: 200px;
    background-color: pink;
    /*
            计算得到
            椭圆水平半径=400 *20%=80px
            椭圆垂直半径=200 *20%=40px
        */
    border-radius: 20%;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220723235012574

# 6、单独设置四个方向圆角-小属性

属性 描述 举例
border-top-left-radius 左上角 border-top-left-radius:20px;
border-top-right-radius 右上角 border-top-right-radius:20px 30px;
border-botttom-left-radius 左下角 border-bottom-left-radius:10%;
border-bottom-right-radius 右下角 border-bottom-right-radius:10% 20%;

小属性主要是用来层叠大属性的

<style>
  .box {
    /* 宽 */
    width: 100px;
    height: 100px;
    background-color: tomato;
    /* 4个方向圆角半径为50px */
    border-radius: 50px;
    /* 左上角圆角半径20px */
    border-top-left-radius: 20px;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20211110221612092

# 二、box-shadow 盒子阴影

TIP

box-shadow 给盒子添加阴影效果，阴影是不占空间的

box-shadow: [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色;
  • [ ]方括：表示这个值可以省略不写
  • inset：表示内阴影，当需要设置内阴影时，才添加
  • x 偏移：阴影在 x 轴（水平）方向偏移量 值为正，表示阴影向右偏移 值为负，表示阴影向左偏移
  • y 偏移：阴影在 Y 轴（垂直）方向偏移量 值为正，表示阴影向下偏移 值为负，表示向阴影向上偏移
  • 模半径：值只能是 >=0 的值，表示阴影的模糊半径
  • 扩散半径：取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。
  • 颜色：表示阴影的颜色

# 1、简单阴影

语法：

box-shadow: x偏移 Y偏移 模糊量 颜色;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    /*
        	60px  x(水平)向右偏移量
        	20px y(垂直)向下偏移量
        	10px 阴影模糊量
        	red 阴影颜色为红色
        */
    box-shadow: 60px 20px 10px red;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20211111155738770

# 2、阴影延展

语法：

box-shadow: x偏移 Y偏移 模糊半径 [扩散半径] 颜色;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    /*
        	60px  x(水平)向右偏移量
        	20px y(垂直)向下偏移量
        	10px 阴影模糊量
        	50px 阴影的延展大小（上下左右都延展50px)
        	red 阴影颜色
        */
    box-shadow: 60px 20px 10px 50px red;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20211111155903190

# 3、内阴影

语法：

box-shadow:[inset]  x偏移   Y偏移   模糊半径  [扩散半径]  颜色;

.box{
    width:100px;
    height:100px;
    background-color: aquamarine;
    margin:50px auto;
    box-shadow:inset 0px  0px  10px 20px red;;
}

image-20211111160053223

# 4、多个阴影

TIP

  • 如果一个盒子有多个阴影，则每个阴影之间用 ,（逗号）隔开
  • 当阴影个数> 1时，阴影应用的顺序为从前到后，第一个指定的阴影在最顶部显示。
  • 内阴影不管写在哪个位置，都会在外阴影上面。

语法：

box-shadow: [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色, [inset] x偏移 Y偏移
    模糊半径 [扩散半径] 颜色, [inset] x偏移 Y偏移 模糊半径 [扩散半径] 颜色;

<style>
  .box {
    width: 100px;
    height: 100px;
    /* 背景颜色为橘黄色 */
    background-color: orange;
    margin: 50px auto;
    /* 左上角和右下角圆半径为100px */
    border-radius: 100px 0px 100px 0px;
    border: 4px solid tomato;
    /* 红色阴影，红色里面的黄色影阴,最外面的黄色阴影 */
    box-shadow: 0px 0px 10px rgb(251, 9, 9), inset 0px 0px 20px yellow,
      0px 0px 10px 30px yellow;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20211111161237794

# 5、去掉阴影

/*
	none 为box-shadow的默认值，不设置阴影效果
	当我们想去掉元素添加的阴影效果时，就可以设置box-shadow:none;
*/
box-shadow: none;

# 6、实战案例-纸张效果

<style>
  .page {
    margin: 50px auto;
    width: 400px;
    height: 600px;
    padding: 20px;
    box-shadow: inset 0 -48px 48px rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
      5px 5px 16px rgba(0, 0, 0, 0.3);
  }
</style>
<body>
  <div class="page"></div>
</body>

image-20220725183849488

# 三、text-shadow 文本阴影

TIP

  • text-shadow用来为文字添加阴，如果要给文字添加多个阴影，多个阴影之间用 ,（逗号 ）隔开
  • 当阴影个数> 1时，阴影应用的顺序为从前到后，第一个指定的阴影在最顶部显示。

语法:

/*
	x偏移和Y偏移，值可以为正负整数
	模糊半径 为0或大于0的整数
*/
text-shadow: x偏移 Y偏移 模糊半径 颜色;

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    font-size: 100px;
    /* 红色阴影  蓝色阴影 */
    text-shadow: 0px 0px 10px rgb(251, 9, 9), 50px 10px 10px blue;
  }
</style>
<body>
  <div class="box">我</div>
</body>

image-20211111164657518

# 四、文本溢出显示省略号

TIP

单行文本和多行文本溢出隐藏并显示省略号 ... 在实际项目开发中经常使用

# 1、单行文本溢出显示省略号

/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;

<style>
    p {
        width: 200px;
        height: 50px;
        border: 1px solid #ddd;
        line-height: 50px;
        /* 文字不换行 */
        white-space: nowrap;
        /* 超出显示省略号 */
        text-overflow: ellipsis;
        /* 超出部分隐藏 */
        overflow: hidden;
    }
</style>
<body>
    <p>当文字的内容超容器的宽度时，会显示3个省略号</p>
</body>
</html>

image-20220725185707091

# 2、多行文本溢出显示省略号

<style>
  p {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    line-height: 50px;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 超出部分显示省略号 */
    text-overflow: ellipsis;
    /* 对象做为弹性盒子模型显示 */
    display: -webkit-box;
    /* 块容器 中的内容限制为指定的行数。 */
    -webkit-line-clamp: 2;
    /* 弹性盒子对象的子元素排列方式为竖排 */
    -webkit-box-orient: vertical;
  }
</style>
<body>
  <p>当文字的内容超容器的宽度时，会显示3个省略号当文字的内容超容器的宽度时，</p>
</body>

image-20220725191016905

注意事项：

只有当元素的高 = line-height 大小 * -webkit-line-clamp（指定行数） 时，才能显示出正确的效果。

# 五、opacity 设置元素不透明度

TIP

opacity 属性指定了一个元素的不透明度 ，其属性值如下：

值 描述
0 元素完全透明（即元素不可见）
值在 0.0 -1.0 之间 元素半透明（元素后面的背景可见）,值越大，元素透明度越低
1 即元素完全不透明（即元素后面的背景不可见）
  • opacity 的值是一个 0.0 到 1.0 范围内的数字值，如果值超出这个范围，也有效，但是会被解析为在取值范围内最靠近它的值
  • opacity 设置透明度时，其里面的子元素和内容也会被透明掉。所以也可以用 opacity: 0;来隐藏一个元素，及其里面的子元素一起隐藏掉。
<style>
  .item {
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
    margin: 10px 10px;
  }
  .item1 {
    /* 不透明度 */
    opacity: 0.8;
  }
  .item2 {
    /* 不透明度 */
    opacity: 0.5;
  }
  .item3 {
    /* 不透明度 */
    opacity: 0.1;
  }
</style>
<body>
  <div class="item item1">.item1</div>
  <div class="item item2">.item2</div>
  <div class="item item3">.item3</div>
</body>

image-20220725154757541

opacity 的属性值不为 1 时，元素会创建自已的层叠上下文

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .box1 {
    background-color: skyblue;
    /*
        opacity的值不为1时，会创建层叠上下文
        即opacity:0.7时，.box1会在.box2的上面显示
        */
    opacity: 0.7;
  }
  .box2 {
    background-color: pink;
    margin-top: -50px;
    margin-left: 30px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>
.box1 未设置不透明度时或不透明度为 1 时 .box1 的不透明度 opacity: 0.7 时
image-20220725155724533 image-20220725155812560

对比学习

属性 说明
visiblity: hidden 隐藏元素，但元素还占着原有的空间，在 DOM 树中
display: none 元素隐藏，不占着原来空间，不在 DOM 树中
background-color: rgba(0,0,0,0.1) 仅背景颜色透明，并不影响元素中的内容
opacity: 0 元素透明，连同其内容和子元素一起透明掉
overflow: hidden 内容超出部分隐藏，影响的是子元素

# 六、filter 滤镜-图片模糊

TIP

filter: blur()函数用于将高斯模糊效果应用于元素（图像）

语法：

/* 元素模糊度为50px */
filter: blur(50px);

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 模糊度 */
    filter: blur(20px);
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220725161801474

注：

点击查看，更多内容参考官网 👆 (opens new window)

背景模糊效果

利用 filter: blur 与 background-size 的结合来实现背景模糊效果

<style>
  body {
    margin: 0;
  }
  .box {
    width: 100%;
    background-color: #000;
    height: 220px;
    overflow: hidden;
  }
  .item {
    height: 220px;
    /* 背景图片 居中 */
    background: url(./images/tx2.jpg) center;
    /* 背景图片大小 */
    background-size: 150%;
    /* 元素模糊度 */
    filter: blur(60px);
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

image-20220725164313144

# 七、object-fit 图片裁剪

TIP

object-fit属性指定可替换元素的内容应该 如何适应到其使用的高度和宽度确定的框

可替换元素，点击查看完整官方详细内容 👆

object-fit通过以下属性值，来切换被替换元素的内容对象在元素框内的对齐方式，有点类似于background-size。

  • 但是 object-fit 在对齐时，是在元素框中间向两边的方式来填充
  • 而 background-size 默认是从左上角向右和下来填充的，如果要设置以中间向两边，需要设置 background-position: center;
属性值 描述
contain 被替换的内容将被缩放，保持元素的宽高比，全部填充在内容框内。
cover 被替换的内容将被缩放，保持元素的宽高比，填满整个内容框。
fill 被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形
none 被替换的内容将保持其原有的尺寸。
scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
<style>
  img {
    width: 250px;
    height: 200px;
    border: 2px solid blue;
  }
  .contain {
    /* object-contain 保持宽高比 填充在内容框中 */
    object-fit: contain;
  }
  .cover {
    /* cover 保持宽高比，填充满整个内容框 */
    object-fit: cover;
  }
  .fill {
    /* fill 被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形  */
    object-fit: fill;
  }
  .none {
    /* none 被替换的内容将保持其原有的尺寸 */
    object-fit: none;
  }
  .scale-down {
    /* scale-down 表示被替换内容尺寸为 none和 contain中最小的那一个 */
    object-fit: scale-down;
  }
</style>
<body>
  <img src="images/hua1.jpg" alt="" class="contain" />
  <img src="images/hua1.jpg" alt="" class="cover" />
  <img src="images/hua1.jpg" alt="" class="fill" />
  <img src="images/hua1.jpg" alt="" class="none" />
  <img src="images/fish.png" alt="" class="scale-down" />
  <img src="images/fish.png" alt="" class="contain" />
</body>

image-20220725174924868

案例应用：防止图片拉伸或挤压

  • 我们预想的是用户按 1:1 的大小来上传头像图片，但实际用户上传的头像比例是五花八门，就会造成图片被拉伸或挤压变形。
  • 我们可以添加Object-fit: cover来等比例裁剪图片尺寸，这样图片就不会被拉伸或压缩，不过会有一部分图片被裁剪掉。
设计师设计效果 （图片尺寸 1：1） 实际效果：图片尺寸（1:1.4） 处理后效果：保持原尺寸比例裁剪图片
image-20220526172933378 image-20220526173100167 image-20220526173221648
<style>
  .box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 超出部分隐藏 */
    overflow: hidden;
  }
  .box img {
    width: 100%;
    height: 100%;
    /* 保持图片原有尺寸来裁剪 */
    object-fit: cover;
  }
</style>
<body>
  <div class="box">
    <img src="images/tx2.png" alt="" />
  </div>
</body>

# 八、防止拖拽文本域

TIP

resize 属性规定是否可由用户调整元素的尺寸

<style>
  .content textarea {
    /* 文字与多行文本框垂直居中对齐 */
    vertical-align: middle;
    /* 不允许调整尺寸大小 */
    resize: none;
  }
</style>
<body>
  <div class="content">
    补充内容：
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </div>
</body>

# 九、calc 函数

TIP

calc() 函数用于动态计算长度值

/* 最终计算得到width:300px */
width: calc(100px + 200px);

calc 函数使用是注意点

  • calc()函数支持 + - * / 运算；
  • 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
  • * 和 /时，其前后可以没有空格，但建议留有空格；
  • 任何长度值都可以使用 calc()函数进行计算；
  • 可以使用百分比、px、em、rem 等单位；
  • calc()函数使用标准的数学运算优先级规则；
<style>
  .box {
    /* 宽始终比浏览器小100px */
    width: calc(100% - 100px);
    height: 200px;
    /* 水平居中 */
    margin: 0px auto;
    background-color: skyblue;
  }
</style>
<body>
  <div class="box"></div>
</body>

# 十、var 函数

TIP

在讲解 var 函数前，我们要先来了解一个新的选择器

# 1、:root 选择器

TIP

root 选择器用匹配文档的（html)根元素。

/* 页面背景色为红色 */
:root {
  background-color: red;
}

:root 与 html 择器的区别

两者的唯 一区别在于:root选择器的优先级要高于 html 标签选择器

:root {
  /* 背景黄色 */
  background-color: khaki;
}
html {
  /* 背景天蓝色 */
  background-color: skyblue;
}

因为:root的优先级高于html标签选择器，则最终的浏览器背景以khaki 黄色呈现。

# 2、var 函数解读

TIP

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

  • 自定义属性一定要以 -- 开头
  • 自定义属性会沿着父元素一直向外找，以最近找到的为主。写在后面的自定义属性会覆盖写在前面的
<style type="text/css">
  :root {
    /* 自定义属性 */
    --font-color: red;
  }
  .box {
    /* 自定义属性 */
    --font-color: blue;
  }
  .item {
    /* var函数调用自定义属性 */
    color: var(--font-color);
  }
</style>
<div class="box">
  <div class="item">自定义属性的寻找原则：就近原则</div>
</div>

image-20220724011435533

TIP

  • 通常自定义属性是写在 :root 选择器中 ，并且 :root 选择器会放在 css 的最上面。
  • 这样所有的选择器都能用到这个自定义变量属性。
<style type="text/css">
  :root {
    /* --开头，表示自定义属性 */
    --font-color: red;
    --font-size: 20px;
  }
  h3 {
    /* 字体颜色为红色 */
    color: var(--font-color);
  }
  p {
    /* 字体大小为20px */
    font-size: var(--font-size);
  }
  ul li {
    font-size: var(--font-size);
    color: var(--font-color);
  }
</style>
<div class="box">
  <h3>标题</h3>
  <p>文本内容</p>
  <ul>
    <li>li中第1条</li>
    <li>li中第2条</li>
  </ul>
</div>

image-20220730215955406

# 十一、专项案例训练（作业）

根据课程进度完成以下针对性案例开发，开发过程要求：

  • 利用 PS（Photoshop）与 PxCook 结合，在 PS 中的找到 PxCook-切图面板，选中想要切图的图层 或者 图层组 ，然后点击切图面板上的 标记为切图 按钮 -> 再导出到 PxCook
  • 在 PxCook 中下载对应的切图素材即可获取当前案例中的开发素材
  • 开发过程中所需的尺寸在 PxCook 中量取

以上开发开发流程是用于个人训练从切图、量取尺寸，到具体的开发过程，包括平时自学中如果没有 PSD 源文件时，PxCook 是最佳的个人开发工具。因此现在阶段推荐使用这种方式来练习

在实际企业网页开发中（更多是团队协作开发，流程如下）

  • 设计师设计好 UI 设计稿后 -> 会在 PS 中标记切图 -> 导出至蓝湖（国内企业用的多）中
  • 前端开发人员下载网页开发所需的素材 -> 在蓝湖中量取尺寸 -> 即可开发静态页面

我们把 CSS/CSS3 基础知识全部学习完之后，会有 3 大项目开发（PC 端，响应式，移动端）会按照企业真实团队协作的方式，用 3 个项目来完整的实践。

PSD 的源文件设计稿（联系助理老师获取即可）

  • 具体操作步骤讲解，在钉钉群直播回放视频（第十二课：CSS 盒子模型）中可查阅

切记

学习阶段一定要按照以上的流程学习，提前熟悉工具和整个开发步骤，企业真实项目开发就是这样的流程

# 1、CSS 开发天猫登录注册页面

CSS开发天猫登录注册页面

点击查看完整版视频讲解

# 2、CSS 表格布局（QQ 音乐排行榜效果）

CSS表格布局

点击查看完整版视频讲解
上次更新时间: 6/8/2023, 9:23:17 PM

← transition 过渡动画与 animation 自定义动画 →

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群，获取资料

X