03/23~03/29周报

最新推荐文章于 2023-08-14 10:02:59 发布

原创最新推荐文章于 2023-08-14 10:02:59 发布 · 129 阅读

CC 4.0 BY-SA版权

本文深入探讨CSS的高级特性，包括计数器、边框、背景、渐变、文本溢出、换行、2D及3D转换、过渡与动画、多列布局和用户界面的调整。详细解析了如linear-gradient、radial-gradient、text-overflow、word-wrap、translate、rotate、scale、skew、matrix、@keyframes规则等关键CSS属性的使用方法。

【本周任务】
一、JavaScript（第一到第三章）
二、css复习
1.计数器
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

2.边框
（1）阴影（box-shadow）
（2）边界图片（border-image）
有round（平铺）和stretch（拉伸）
3. background
background-image（可以给不同的图片设置多个不同的属性）

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

background-size（指定背景图像的大小）
background-origin（指定了背景图像的位置区域）
在这里插入图片描述
background-clip（背景剪裁属性是从指定位置开始绘制）
4.渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

 background-image: linear-gradient(#e66465, #9198e5);

径向渐变（Radial Gradients）- 由它们的中心定义

 background-image: radial-gradient(red, yellow, green);

5.Text Overflow

text-overflow: ellipsis;

多出来的会省略
6.换行
长文本换行

p {word-wrap:break-word;}

单词拆分换行

p.test1 {
   word-break: keep-all;
}

7.2D转换
translate()
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate()
在一个给定度数顺时针旋转的元素
scale()
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
skew()
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
*skewX(< angle>);表示只在X轴(水平方向)倾斜。
*skewY(< angle>);表示只在Y轴(垂直方向)倾斜。
matrix()
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
8.3D转换
rotateX()
rotateY()
9.过渡（transition 用于在一个属性中设置四个过渡属性）
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay规定过渡效果何时开始。默认是 0。
9.动画
@keyframes 规则
(1)from to
(2)百分比
10.多列
column-count分割的列数
column-gap列与列间的间隙
column-rule-style边框样式
column-rule-width
column-rule-color
column-rule 所有属性的简写
column-span指定元素跨越多少列
column-width
11.用户界面
（1）resize属性指定一个元素是否应该由用户去调整大小（both）
（2）box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
规定两个并排的带边框方框:

div
{
    box-sizing:border-box;
    width:50%;
    float:left;
}

（3）outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
规定边框边缘之外 15 像素处的轮廓:

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

【下周任务】
学习JS