前端第6天

css三角形

在CSS中，可以使用border属性来创建三角形，常用的方法有以下几种：

1. border属性+transparent：通过设置border的width和style，将三角形的三个边框设置为透明，只显示一个角落。

.sjx {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #000;
  border-bottom: 10px solid transparent;
}

2. border属性+rotate：通过设置border的width和style，然后使用transform:rotate()旋转元素，使其形成三角形。

.sjx {
  width: 0;
  height: 0;
  border: 10px solid #000;
  border-color: #f00 transparent transparent transparent;
  transform: rotate(45deg);
}

3. ::before伪元素+border属性：通过设置元素的::before伪元素，然后使用border属性设置三角形的三个边框。

.sjx:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #000;
  border-bottom: 10px solid transparent;
}

以上三种方法都可以用来创建CSS三角形，具体使用哪种方法取决于具体需求和场景。

---

焦点伪类选择器

焦点伪类是CSS中的一种伪类，用于选择当前获得焦点的元素。在页面中，当用户使用Tab键或者鼠标点击元素时，该元素会获得焦点，此时可以使用:focus伪类来设置该元素的样式。

:focus伪类可以应用于大部分HTML元素，包括链接、按钮、输入框等。使用:focus伪类可以增强页面的可访问性和交互性，提高用户体验。

例如，可以使用:focus伪类来设置输入框获得焦点时的样式：

input:focus {
  border: 2px solid #f00;
  outline: none;
}

上述代码表示在输入框获得焦点时，设置其边框为2px红色实线，并去除默认的外边框。

需要注意的是，使用:focus伪类时，应该避免使用outline属性，因为outline可能会影响元素的布局和位置。如果需要去除默认的外边框，可以设置outline为none。

---

属性选择器

属性选择器是CSS中的一种选择器，用于根据元素的属性值来选择元素。属性选择器有多种形式，包括：

1. [attribute]：选择具有指定属性的元素。

input[type] {
  background-color: #eee;
}

上述代码表示选择所有具有type属性的input元素，并设置其背景颜色为灰色。

2. [attribute=value]：选择属性值等于指定值的元素。

a[target="_blank"] {
  color: #f00;
}

上述代码表示选择所有target属性值为"_blank"的a元素，并设置其颜色为红色。

3. [attribute~=value]：选择属性值包含指定词汇的元素，词汇之间用空格分隔。

p[class~="important"] {
  font-weight: bold;
}

上述代码表示选择所有class属性值中包含"important"的p元素，并设置其字体加粗。

4. [attribute|=value]：选择属性值以指定值开头，或者以指定值加上"-"开头的元素。

div[lang|="en"] {
  border: 1px solid #f00;
}

上述代码表示选择所有lang属性值以"en"开头或者以"en-"开头的div元素，并设置其边框为红色。

5. [attribute^=value]：选择属性值以指定值开头的元素。

input[type^="text"] {
  background-color: #eee;
}

上述代码表示选择所有type属性值以"text"开头的input元素，并设置其背景颜色为灰色。

6. [attribute$=value]：选择属性值以指定值结尾的元素。

a[href$=".pdf"] {
  color: #f00;
}

上述代码表示选择所有href属性值以".pdf"结尾的a元素，并设置其颜色为红色。

7. [attribute*=value]：选择属性值包含指定值的元素。

img[alt*="logo"] {
  border: 1px solid #f00;
}

上述代码表示选择所有alt属性值中包含"logo"的img元素，并设置其边框为红色。

属性选择器可以根据具体需求和场景选择使用，以实现不同的样式效果。

---

background-size

`background-size` 是 CSS 中用于指定背景图像的尺寸的属性。它允许你控制背景图像的大小，支持一系列的值，如`auto`、`cover`、`contain`、长度值和百分比。下面是几种常用的取值：

- `auto`：背景图像不会被拉伸或压缩，并按原本的尺寸显示。
- `contain`：确保背景图像可以完整地显示在容器中，同时保持其纵横比例，但是可能会显示出背景图像和容器的留白。
- `cover`：确保容器可见区域被背景图像完全填满，同时保持其纵横比例，但是可能会裁剪背景图像。
- 长度值和百分比：可以指定具体的宽度和高度值，如 `background-size: 200px 300px`，也可以使用百分比值，如 `background-size: 50% 50%`，代表宽度和高度都等于容器的一半。

需要注意的是，如果指定的背景图像尺寸比容器大，那么背景图像会被剪裁。如果尺寸比容器小，则背景图像会在容器中居中显示。

---

transition

CSS过渡效果是一种在元素属性发生变化时平稳地过渡到新状态的方式。您可以通过transition属性来为HTML元素添加过渡效果，例如：

.box {
  transition: background-color 0.5s ease;
}

在这个例子中，当.box元素的背景颜色发生变化时，这个过渡效果将以0.5秒的时间缓慢地过渡到新的背景颜色。 "ease"关键字指定了过渡的时间曲线，使过渡效果更加平滑。

您还可以使用其他的transition属性值来指定更多的过渡效果，例如：

- transition-delay：指定过渡效果何时开始
- transition-duration：指定过渡效果持续的时间
- transition-property：指定要应用过渡效果的元素属性
- transition-timing-function：指定过渡效果的时间函数

这些属性的组合可以创建出各种不同的过渡效果，使您的网站更加动态和生动。