CSS3边框圆角阴影属性
493 字
2 分钟
CSS3边框圆角阴影属性
边框
边框的三要素：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-width | 右边框宽度 |
| border-right-style | 右边框线型 |
| border-right-color | 右边框颜色 |
| border-bottom-width | 下边框宽度 |
| border-bottom-style | 下边框线型 |
| border-bottom-color | 下边框颜色 |
| border-left-width | 左边框宽度 |
| border-left-style | 左边框线型 |
| 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> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } </style></head><body> <div class="triangle"></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: 20%; -
正圆形：正方形盒子如果设置的border-radius属性为50%，就是正 圆形
border-radius: 50%;
盒子阴影
box-shadow属性：box-shadow属性用来实现盒子的阴影：x偏移-y偏移-模糊量- 颜色
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);多阴影：box-shadow属性值可以用逗号隔开多个，表示携带多个阴影
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
CSS3定位属性
前端工程师学习CSS3定位属性
2
CSS3浮动属性
前端工程师学习CSS 浮动：从基本原理到 BFC 与清除浮动
3
CSS3文本与字体属性
前端工程师学习CSS3中的文本与字体相关属性
4
CSS3中的transform属性2D3D转换
前端工程师学习CSS3中的transform属性2D3D转换
5
CSS3中的transition属性过渡与动画
前端工程师学习CSS3中的transition属性过渡与动画
随机文章随机推荐