圆角边框
CSS3中新增圆角边框可以设置带有弧度的形状
border-radius
设置圆角边框,值为数值或者元素宽高百分比,需正方形- 设置方式
border-radius: 左上 右上 右下 左下
:四个值从左上顺时针设置四角的弧度border-radius: 左上/右下 右上/左下
:两个值设置效果border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius
:单独设置4个角
盒子阴影
值 | 描述 |
---|
h-shadow | 水平位移距离(必需,相对盒子的左上角) |
v-shadow | 垂直位移距离(必需,相对盒子的左上角) |
blur | 阴影虚实程度,越大越虚 |
spread | 阴影面积大小 |
color | 阴影颜色,常rgba |
inset | 将默认外部阴影改成内部阴影) |
文字阴影
值 | 描述 |
---|
h-shadow | 水平位移距离(必需,相对盒子的左上角) |
v-shadow | 垂直位移距离(必需,相对盒子的左上角) |
blur | 阴影虚实程度,越大越虚 |
color | 阴影面积大小,常用rgba |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: orange;
font-size: 50px;
text-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>
SPACE X
</h1>
</body>
</html>
参考
黑马pink老师