CSS的基礎用法

2024-02-12

2024-02-13

Css

border-radius

利用 border-radius 制作半个圆的方法：

element {
  width: 50px;
  height: 100px;
  border-radius: 50px 0 0 50px;
  background: green;
}

box-shadow

参数介绍：box-shadow: X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色投影方式;

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

/* out shadow */
element {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 5px 5px black;
}

/* inset shadow */
element {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 5px 5px black inset;
}

/* inset and out */
element {
  box-shadow: 0 0 5px 5px, -5px -5px 5px 5px, 0 0 5px 5px inset;
}

CSS3 Gradient

分为线性渐变（linear）和径向渐变（radial）

线性渐变（linear）

1
2
3

element {
  background-image: linear-gradient(to right, blue, red);
}

参数举例：

to left: 从右渐变到左
to right: 从左渐变到右
to left top: 从右下角渐变到左上角（gradient 翻译：斜坡的意思）

text-overflow 和 word-wrap

text-overflow 用来设置是否使用一个省略标记（…）标示对象内文本的溢出。但是 text-overflow 只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space: nowrap）及溢出内容为隐藏（overflow: hidden），只有这样才能实现溢出文本显示省略号的效果。

element {
  text-overflow: clip | ellipsis;
  overflow: hidden;
  word-wrap: normal | break-word;
}

@font-face

@font-face 能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

@font-face {
  font-family: "font name";
  src: url("font address");
}

text-shadow

用来设置文本的阴影，参数：text-shadow: x, y, blur, color

1
2
3

element {
  text-shadow: 5px, 5px, 0, red;
}

background

background-origin

指定图片的起始位置，如果背景不是 no-repeat，这个属性无效，它会从边框开始显示。设置的参数有：border-box | padding-box | content-box

element {
  background-image: no-repeat;
  background-origin: content-box; /* 从内容开始 */
}

background-clip

将背景图片做适当的剪裁，默认为不剪裁。设置的参数有：border-box | padding-box | content-box

element {
  background-clip: content-box; /* 将内容区域以外的背景图像遮罩 */
  /* 与 background-origin 的不同是，clip 不改变图像的起始显示位置。 */
}

background-size

设置背景图片的大小，设置的参数有：background-size: auto | <长度值> | <百分比> | cover | contain

autoCSS3中的border-radius属性可以用来设置元素的边框圆角。它有四个参数，分别对应元素的四个角的圆角大小。例如，border-radius: 10px 20px 30px 40px;表示元素的左上角为10px的圆角，右上角为20px的圆角，右下角为30px的圆角，左下角为40px的圆角。如果只提供一个值，表示四个角的圆角大小都相同。如果提供两个值，表示左上角和右下角的圆角大小相同，右上角和左下角的圆角大小相同。

box-shadow属性用于向元素添加阴影效果。它有几个参数，包括水平偏移量、垂直偏移量、阴影模糊半径、阴影扩展半径和阴影颜色。例如，box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);表示在元素的右下方添加一个2px的水平偏移和2px的垂直偏移的阴影，阴影的模糊半径为4px，颜色为半透明的黑色。

CSS3中的渐变效果可以通过linear-gradient()函数来实现。该函数接受多个颜色值作为参数，并根据指定的方向创建一个渐变。例如，background: linear-gradient(to right, red, blue);表示从左到右创建一个从红色到蓝色的渐变背景。

text-overflow属性用于控制文本溢出时的显示方式。它主要用于处理长文本在容器内部无法完全显示的情况。常见的值有clip和ellipsis。clip表示文本溢出时直接截断，不显示省略号；ellipsis表示文本溢出时显示省略号。为了生效，还需要将overflow属性设置为hidden，并确保文本在一行内显示，可以使用white-space: nowrap来实现。

@font-face规则用于定义自定义字体，使得页面可以加载服务器端的字体文件。通过指定字体文件的地址和字体名称，可以在页面中使用这些自定义字体。例如，@font-face { font-family: "MyFont"; src: url("myfont.woff"); }定义了一个名为”MyFont”的自定义字体，它的字体文件为”myfont.woff”。

text-shadow属性用于向文本添加阴影效果。它的参数包括水平偏移量、垂直偏移量、模糊半径和阴影颜色。例如，text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);表示在文本的右下方添加一个2px的水平偏移和2px的垂直偏移的阴影，阴影的模糊半径为4px，颜色为半透明的黑色。

background-origin属性用于指定背景图片的起始位置。它的值可以是border-box、padding-box或content-box，分别对应元素的边框、内边距和内容区域作为背景图片的起始位置。

background-clip属性用于控制背景图片的剪裁方式。它的值可以是border-box、padding-box或content-box，分别对应元素的边框、内边距和内容区域作为背景图片的剪裁区域。

background-size属性用于设置背景图片的大小。它的值可以是auto、长度值、百分比、cover或contain。其中，auto表示保持原始图片的

Technology