CSS —— 常见样式（一）

---

一、css 画圆

1. 宽和高必须相等。
2. border-radius: 50%

	.circle{
    
    
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background-color: skyblue;
    }

	<div class="circle"></div>

二、css 画三角形

1. 使用三个边框创建三角形。
2. 如果三角形指向下方，则为顶部。应该具有所需的 border-color。
3. 相邻的边界（即左右）应该有 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>

四、重置所有样式

1. 使用该all属性将所有样式（继承或不继承）重置为其默认值。
2. 注意：这不会影响 direction 和 unicode-bidi 属性。

	.demo {
    
    
        color: red;
        all: initial;
    }

	<div class="demo">
        <h4>Title</h4>
        <p>
            庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。
            予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？
            若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。
        </p>
    </div>

五、渐变文字

1. background 与值一起使用 linear-gradient() 可为文本元素提供渐变背景。
2. -webkit-text-fill-color: transparent; 用透明颜色填充文本。
3. -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>

六、内容居中

1. 将 position 父级的设置为 relative，将子级的设置为 absolute 以将其与父级相关联。（父级相对，子级绝对）
2. 使用 left: 50% 和 top: 50% 将子元素从包含块的左上边缘偏移 50%。
3. 用于 `transform: translate(-50%, -50%)否定其位置，使其垂直和水平居中。

1. 使用 top:50%; left:50%; 让小矩形处于以左上角为原点的中心位置。
2. 再使用 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>

七、自定义文本选中

1. ::selection 选择器匹配元素中被用户选中或处于高亮状态的部分。

	.demo::selection{
    
    
        background: skyblue;
        color: aquamarine;
    }

	<p class="demo">选择其中的一些文本</p>

八、流畅的排版（响应式字体）

1. 使用 clamp() CSS 函数来限制 font-size 1rem 和 3rem。
2. 使用公式 8vw - 2rem 计算 font-size( 1rem, 3rem) 的响应值。（600px —— 1000px）

	.demo {
    
    
        font-size: clamp(1rem, 8vw - 2rem, 3rem);
    }

	<p class="demo">Hello World.</p>