update

KevinBlandy · Dec 6, 2024 · 4098e90 · 4098e90
1 parent 3664a4e
commit 4098e90
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 71 deletions.
diff --git a/Css/css-style-border.css b/Css/css-style-border.css
@@ -24,7 +24,9 @@ Border
 	border-color
 
 	border-radius
-		* 设置边框四个角的圆角
+		* 设置边框四个角的圆角，可以使用综合写法
+			border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y;
+
 		* 它是下面属性的简写
 			border-end-start-radius
 				* 左下角
@@ -36,6 +38,7 @@ Border
 				* 左上角
 
 		* 也可以是下列属性
+		* 可以设置俩值，分别是椭圆的 x 半径、 y 半径
 			border-top-left-radius
 				* 左上角
 			border-top-right-radius

diff --git a/Css/css-style-文本.css b/Css/css-style-文本.css
@@ -17,38 +17,81 @@
 
 	white-space
 	 	* 设置如何处理元素内的空白字符
+		* 可选值
+							换行符	空格和制表符	文本换行	行末空格	行末的其他空白分隔符
+			normal			合并	合并			换行		移除		挂起
+			nowrap			合并	合并			不换行		移除		挂起
+			pre				保留	保留			不换行		保留		不换行
+			pre-wrap		保留	保留			换行		挂起		挂起
+			pre-line		保留	合并			换行		移除		挂起
+			break-spaces	保留	保留			换行		换行		换行
+
+		* 参考
+			https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space
 
 	text-shadow
 		* 设置阴影
+			text-shadow: h-shadow v-shadow blur color;
+
+		* 值
+			<color>
+				* 可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色，则使用用户代理自行选择的颜色，因此需要跨浏览器的一致性时，应该明确定义它。
+
+			<offset-x> <offset-y>
+				* 必选。这些 <length> 值指定阴影相对文字的偏移量。
+				* <offset-x> 指定水平偏移量，若是负值则阴影位于文字左侧。<offset-y> 指定垂直偏移量，若是负值则阴影位于文字上方。如果两者均为 0，则阴影位于文字正后方，如果设置了 <blur-radius> 则会产生模糊效果。
+
+			<blur-radius>
+				* 模糊值，可选。这是 <length> 值。如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
+
+		* 参考
+			https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
 
+	text-overflow
+		* 设置文本溢出后的处理方式
+		* 可选值
+			clip
+				* 默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。
+				* 如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。
+
+			ellipsis
+				* 这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。
+				* 这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。
+
+		* 注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值。
+
 	word-wrap
 		* 目前它已被更名为 overflow-wrap，word-wrap 相当于其别称。
 		* 应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。
 		* 与 word-break 相比，overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。
-
 
 	text-decoration
 		* 它是如下属性的简写
 			text-decoration-color
+				* 颜色
+
 			text-decoration-line
+				* 线条格式
+					overline
+						* 上划线
+					underline
+						* 下划线
+					line-through
+						* 删除线
 			text-decoration-style
+				* 线条类型
+					dotted
+						* 虚线
+					wavy
+						* 波浪线
+
 			text-decoration-thickness
+				* 指定当上划线和下划线经过字形上升部和下降部时如何渲染
+				* 可选值
+					none
+					auto
+					all
 
-		* 设置文本装饰
-			overline
-				* 上划线
-			underline
-				* 下划线
-			line-through
-				* 删除线
-
-		* 第二个参数设置线体的格式
-			dotted
-				* 虚线
-			wavy
-				* 波浪线
-
-		* 第三个参数设置颜色
 		* 参考
 			https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration
 

diff --git a/Css/css-style-渐变.css b/Css/css-style-渐变.css
@@ -0,0 +1,7 @@
+--------------------------
+渐变
+--------------------------
+	# 线性渐变
+	# 径向渐变
+	# 重复渐变
+
diff --git a/Css/css-style.css b/Css/css-style.css
@@ -49,12 +49,17 @@
 		* <number> /*  0.0 到 1.0 范围内的数字值，这个数值既包含也代表通道的透明度，也就是 alpha 通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。 */
 		* 参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity
 		* opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
+
+	# 轮廓线: outline
+		* 简写
+			outline-color
+			outline-style
+			outline-width
 
+		* outline-offset 不是 outline 的子属性，它是独立的，要单独声明
+			<length>
+				* 元素与其轮廓线之间的间距宽度。负值会将轮廓线置于元素内部。当值为 0 时，轮廓线与元素之间没有间距。
 
-----------------------
-轮廓线
-----------------------
-	# outline
 		* 和 border 很类似，但有如下区别：
 			* outline 不占据空间，绘制于元素内容周围。
 			* 根据规范，outline 通常是矩形，但也可以是非矩形的。
@@ -65,53 +70,11 @@
 			width：默认值为 medium
 
 		* 将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式
-
-	# outline-color
-	# outline-offset
-	# outline-style
-	# outline-width
-
-	# 参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline
-
-----------------------
-阴影
-----------------------
-	# box-shadow
-		* 盒子阴影
-		* 默认的是外阴影：outset，但是不能主动声明这个值，否则阴影无效
-		* 盒子阴影不占用空间，不会影响其他盒子排列
-
-
-	#  text-shadow
-		* 文本阴影
-
----------------------
-圆角
----------------------
-	# border-radius:
-
-		* 第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，只会传入一个值，这个值会被用于这两个。
-			.box {
-			  border-top-right-radius: 1em 10%; /* 右上角的水平半径为 1em，垂直半径为 10％ */
-			}
 
-		* 支持百分比
-		* 可以设置 4 个值，表示 4 个不同的角（顺时针），只设置两个，表示设置对角。
-		* 圆角矩形，设置为元素高度的一半
-
+		* 参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline
 
-	# 分别设置四个角
-		border-top-left-radius:
-		border-top-right-radius:
-		border-bottom-left-radius:
-		border-bottom-right-radius:
 
-
-
----------------------
-滤镜
----------------------
-	# filter
+	# 滤镜: filter
 		* 值是函数	
 			blur()
 				* filter: blur(5px);
@@ -127,9 +90,4 @@
 			sepia()
 
 		* 可以组合任意数量的函数来控制渲染。滤镜将按声明顺序依次应用
-
-
-
-	# 参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
-
-
+		*  参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter