--愿你内心有种不灭的火焰,将你与别人区分开来--

0%

形状

CSS 形状

0x00 border-radius

border-radius 有一个鲜为人知的属性,它可以单独指定水平和垂直半径,只要用斜杠(/) 分隔这两个值即可。此外,它不仅可以接受数值单位,还可以接受百分比值。而这个百分比会基于元素的尺寸进行解析。

所以,要创建一个自适应的椭圆,只需将两个方向(水平和垂直)的半径都设置为 50%

1
2
3
4
5
6
#box{
width:400px;
height:200px; border-radius: 50% / 50%;
}
// or 进一步简化
border-radius: 50%;

椭圆

大值特性和等比例特性

此外,border-radius 还有两个特性:大值特性等比例特性

大值特性

也就是值很大的时候,只会使用能够渲染的圆角大小渲染。大值特性相对于元素自身的 width ,height而言。

1
2
3
4
5
6
7
8
9
10
#box {
width: 200px;
height: 200px;
background: deeppink;
border-radius: 50%;
/*border-radius:100%*/
/*border-radius: 100px*/
/*border-radius:200px;*/
/*border-radius: 400px*/
}

如上,下面的渲染结果都是一样的,即最大渲染半径只能是 50%,100px;

border-radius的大值特性

等比例特性

等比例特性:水平半径和垂直半径的比例是恒定不变的。等比例特性相对设置的 border-radius 参数的比例而言的

1
2
3
4
5
6
7
#box {
width: 200px;
height: 300px;
background: deeppink;
border-radius: 300px 0 0 0/300px 0 0 0;

}

等比例特性

元素占据宽度200像素,高度300像素。所以,根据大值特性,水平方向的300像素只能按照200像素半径渲染;再根据等比例特性,虽然垂直方向理论上的最大半径是300像素,但是受制于当初设定的300px300px的1:1比例,垂直方向最终渲染的半径大小也是200像素。于是,我们最后得到的只是一个200像素200像素的圆弧。

最后值得注意的是,border-radius 属性中前面的方位关键字和后面的半径方位是不匹配.它们的关系是:border-垂直-水平-radius: 水平 垂直

OK,了解上面的东西以后我们可以开始使用 border-radius 来实现许多形状了,比如:

半椭圆

1
2
3
4
5
6
#box {
width: 200px;
height: 300px;
background: deeppink;
border-radius: 50% / 100% 100% 0 0 ;
}

半椭圆

四分之一椭圆

1
2
3
4
5
6
#box {
width: 200px;
height: 300px;
background: deeppink;
border-radius: 100% 0 0 0;
}

四分之一椭圆

0x01 平行四边形

我们很容易想到对矩形使用 skew() 变形属性来达到我们想要的效果,但是,这样势必导致其元素中的内容也会跟着被拉伸,于是,我们想到使用伪元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#box {
width: 100px;
height: 40px;
margin: 100px auto;
margin-left:400px;
text-align: center;
line-height: 40px;
/*其它文字,颜色,内边距等样式...*/
position: relative;
/*设置宿主元素为相对定位*/
}

#box:before {
/*使用伪元素来生成一个矩形*/
content: '';
position: absolute;
/*设置伪元素为绝对定位*/
left:0;
top:0;
right:0;
bottom: 0;
/*设置伪元素所有偏移量为0,使其自动继承宿主元素尺寸*/
z-index: -1;
/*将伪元素堆叠层次至于宿主元素之后*/
background: deeppink;
transform:skewX(45deg);
/*使用skewX()变形*/
border:1px solid red;
}

伪元素生成平行四边形

这技巧的关键在于,利用伪元素及其定位属性产生了一个方块,然后对伪元素设置样式,并将其放置在宿主元素的下层。