圆角边框-盒子阴影-文字阴影

目录

圆角边框

原理

圆角边框的应用

盒子阴影

文字阴影

---

圆角边框

原理

圆角边框样式可以使盒子的角由直角变成圆角

/* length 指与盒子各角相交集的内切圆的半径 */
div {
    border-radius: length;
}

radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

                                

圆角边框的应用

参数值 length 可以为数值或百分比的形式

画圆

1. 先画一个正方形
2. 将 length 值设置为正方形边长的一半
3. border-radius: width/2px;
4. border-radius: 50%；

div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    border-radius: 50%;
}

画圆角矩形

1. 先画一个矩形盒子
2. 将 length 设置为 height / 2

div {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50px;
}

此属性为一个简写属性，其后可以跟四个值，分别代表左上角、右上角、右下角、左下角

画不同圆角的盒子

div {
    border-radius: 10px 20px 30px 40px;  /* 左上 右上 右下 左下 */
    border-radius: 10px 20px;  /* 10px为左上角和右下角，20px为左下角和右上角 */
}

单独设置各圆角

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

盒子阴影

CSS 中新增盒子阴影，使用 box-shadow 属性为盒子添加阴影

/* 语法格式 */
box-shadow: h-shadow v-shadow blur spred color inset;

参数	描述
h-shadow	必须，水平阴影的位置，允许负值
v- shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

div {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 50px auto;
    box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}

注意：

1. 默认的是外阴影（outset），但是不可以写此参数，否则会导致阴影失效
2. 盒子阴影不占用空间，不会影响其他盒子排列

/* 原先盒子没有阴影，鼠标经过盒子显示阴影效果 */
div: hover {
    box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}

文字阴影

text-shadow属性设置文字阴影

/* 语法 */
text-shadow: h-shadow v-shadow blur color;

参数	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

p {
    font: 30px 'Microsoft YaHei UI' ;
    text-shadow: 5px 5px 5px rgba(0,0,0,.3);
    color: darkred;
}

白日依山尽，黄河入海流