边框与圆角
边框的三要素
border属性需要三个要素
border: 1px solid red;
线宽度 线型 线颜色
线型
| 线型值 | 意义 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
边框的三要素小属性
边框三要素可以拆分为小属性
| 小属性 | 意义 |
|---|---|
| border-width | 线宽 |
| border-style | 线型 |
| border-color | 线颜色 |
四个方向的边框
| 属性 | 意义 |
|---|---|
| border-top | 上边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
四个方向边框的三要素小属性
| 属性 | 意义 |
|---|---|
| border-top-width | 上边框宽度 |
| border-top-style | 上边框线型 |
| border-top-color | 上边框颜色 |
| border-right-color | 右边框宽度 |
| border-right-style | 右边框线型 |
| border-right-color | 右边框颜色 |
| border-bottom-color | 下边框宽度 |
| border-bottom-style | 下边框线型 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框宽度 |
| border-left-color | 左边框线型 |
| border-left-color | 左边框颜色 |
去掉边框
border-left: none;属性即可去掉左边框，以此类推
利用边框制作三角形
<!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>
.box1 {
width: 0;
height: 0;
/* transparent是透明色 */
border: 20px solid transparent;
border-top-color: red;
}
.box2 {
width: 0;
height: 0;
/* transparent是透明色 */
border: 20px solid transparent;
border-bottom-color: red;
}
.box3 {
width: 0;
height: 0;
/* transparent是透明色 */
border: 20px solid transparent;
border-right-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
圆角
border-radius属性的值通常为px单位，表示圆角的半径
border-radius属性可以单独设置四个圆角。
border-radius: 10px 20px 30px 40px;
左上 右上 右下 左下 顺时针
小属性
| 属性 | 意义 |
|---|---|
| border-top-left-radius | 左上角 |
| border-top-right-radius | 右上角 |
| border-bottom-left-radius | 左下角 |
| border-bottom-right-radius | 右下角 |
百分比为单位
border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
正方形盒子如果设置的border-radius属性为50%，就是正圆形
border-radius:20%;
阴影
box-shadow 属性用来实现盒子的阴影
box-shadow: 10px 20px 30px rgba(0,0,0,.4);
x偏移 y偏移 模糊量 颜色
阴影延展
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);
阴影延展
内阴影
box-shadow 属性值前加inset单词，表示内阴影
box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦