一、css 画圆
- 宽和高必须相等。
- border-radius: 50%
.circle{ border-radius: 50%; width: 50px; height: 50px; background-color: skyblue; } <div class="circle"></div>
二、css 画三角形
- 使用三个边框创建三角形。
- 如果三角形指向下方，则为顶部。应该具有所需的 border-color。
- 相邻的边界（即左右）应该有 transparent，即设置为透明。
.triangle { width: 0; height: 0; border-top: 25px solid pink; border-left: 25px solid transparent; border-right: 25px solid transparent; } <div class="triangle"></div>
三、程序化的引号
quotes 属性设置嵌套引用的引号类型。
q { quotes: '“' '”'; } <p> <q>不积跬步无以至千里，不积小流无以成江海。</q> —— 荀子 </p>
四、重置所有样式
- 使用该all属性将所有样式（继承或不继承）重置为其默认值。
- 注意：这不会影响 direction 和 unicode-bidi 属性。
.demo { color: red; all: initial; } <div class="demo"> <h4>Title</h4> <p> 庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。 予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？ 若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。 </p> </div>
五、渐变文字
background 与值一起使用 linear-gradient() 可为文本元素提供渐变背景。
-webkit-text-fill-color: transparent; 用透明颜色填充文本。
-webkit-background-clip: text; 用文字裁剪背景，用渐变背景作为颜色填充文字。
.gradient-text { background: linear-gradient(red, blue); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 32px; } <p class="gradient-text">这是一行渐变的文字</p>
六、内容居中
- 将 position 父级的设置为 relative，将子级的设置为 absolute 以将其与父级相关联。（父级相对，子级绝对）
- 使用 left: 50% 和 top: 50% 将子元素从包含块的左上边缘偏移 50%。
- 用于 `transform: translate(-50%, -50%)否定其位置，使其垂直和水平居中。
使用 top:50%; left:50%; 让小矩形处于以左上角为原点的中心位置。
再使用 transform:translate(-50%,-50%); 让小矩形往左上移动自身长宽的50%。
.parent { position: relative; height: 200px; width: 200px; border: 2px solid blue; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } <div class="parent"> <div class="child">居中的内容</div> </div>
七、自定义文本选中
- ::selection 选择器匹配元素中被用户选中或处于高亮状态的部分。
.demo::selection{ background: skyblue; color: aquamarine; } <p class="demo">选择其中的一些文本</p>
八、流畅的排版（响应式字体）
- 使用 clamp() CSS 函数来限制 font-size 1rem 和 3rem。
- 使用公式 8vw - 2rem 计算 font-size( 1rem, 3rem) 的响应值。（600px —— 1000px）
.demo { font-size: clamp(1rem, 8vw - 2rem, 3rem); } <p class="demo">Hello World.</p>
