css 绘制不同形状
各种形状特性
border-radius 圆与椭圆
给任何正方形元素设置一个足够大的border- radius,就可以把它变成一个圆形。 如果它的宽高相等,就显示为一个圆;如果宽 高不等,就显示为一个椭圆。
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 正方形边长的一半 */
border-radius,有一个鲜为人知的真相:它可以单独指定水平 和垂直半径,只要用一个斜杠(/)分隔这两个值即可。它不仅可以接受长度值,还可以接受百分比值。这个特性允许我 们在拐角处创建椭圆圆角。因此,如果我们有一个尺寸为 200px×150px 的元素,就可以把它圆角的两个半径值分别指定为元素宽高的 一半,从而得到一个精确的椭圆。
background: #fb3;
width: 200px;
height: 150px;
border-radius: 100px / 75px;
border-radius: 50% / 50%;
border-radius: 50%;
background-size 条纹背景
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
transform 平行四边形
<a href="#yolo" class="button"> HTML <div>Click me</div>
</a>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
// 伪元素方案
.button {
position: relative;
/* 其他的文字颜色、内边距等样式...... */
}
.button::before {
content: ''; /* 用伪元素来生成一个矩形 */ position: absolute;
top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
background: #58a;
transform: skew(45deg);
}
box-shadow 投影效果
- 第一个属性 :水平偏移
- 第二个属性 :垂直偏移
- 第三个属性 :模糊半径
- 第四个属性 :扩张半径
box-shadow 鲜为人知的第四个长度参数。它排在 模糊半径参数之后,称作扩张半径。这个参数会根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸
# 单侧投影
box-shadow: 5px 0 5px -5px black,
# 邻边投影
box-shadow: 3px 3px 6px -3px black;
# 双侧投影
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
切角效果
linear-gradient(direction, color-stop1, color-stop2, ...)
默认方向是从上到下
background: #58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);
border 三角形效果
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black;